angular binding assessment

app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h3>Bind it!</h3>
      <div>
        <app-game-control (addNumber)="showCount($event)"></app-game-control>
        <div class="row">
          <div class="col-xs-6">
              <app-even *ngFor="let number of numberCount"  [evenNumber]="number"></app-even>
          </div>
          <div class="col-xs-6">
              <app-odd *ngFor="let number of numberCount" [oddNumber]="number"></app-odd>  
          </div>
        </div>   
        </div>
    </div>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numberCount = [];


  showCount(count: {count: number}) {
    console.log(count.count);
    this.numberCount.push(count.count);
  }

}

even.component.html

<p *ngIf="evenNumber % 2 === 0">
  Even Number {{evenNumber}}
</p>

even.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-even',
  templateUrl: './even.component.html',
  styleUrls: ['./even.component.css']
})
export class EvenComponent implements OnInit {

  @Input() evenNumber: number;
  constructor() { }

  ngOnInit() {
  }

}

game-control.component.html

<div class="content">
  <button class="btn btn-primary btn-space" 
  (click)="OnStart()">
  Start
  </button>
  <button class="btn btn-danger btn-space"
    (click)="OnStop()">
    Stop
  </button>
  
</div>

game-control.component.ts

import { Component, OnInit, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})


export class GameControlComponent implements OnInit {

  myTimer;
  count = 0;
  @Output() addNumber = new EventEmitter <{count: number}>();
  constructor() { }

  ngOnInit() {
  }

  OnStart() {
    this.myTimer = setInterval(() => {
      this.addNumber.emit({count: this.count++});
    }, 1000);
  }

  OnStop() {
    clearInterval(this.myTimer);
  }

}

odd.component.html

<p *ngIf="oddNumber % 2 !== 0">
    Odd Numbers {{oddNumber}}
</p>

odd.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-odd',
  templateUrl: './odd.component.html',
  styleUrls: ['./odd.component.css']
})
export class OddComponent implements OnInit {

  @Input() oddNumber: number;
  constructor() { }

  ngOnInit() {
  }

}