ng generate component game-control
ng generate component odd
ng generate component even

ng g c game-control
ng g c odd
ng g c even

<button class="btn btn-primary">Start Game</button>
<button class="btn btn-primary">Stop Game</button>

<app-game-control></app-game-control>

counter: number = 0;
interval_in_milliseconds: number = 1000;
doInitTimer(){
  console.log('doInitTimer');
  this.interval_instance = setInterval(() => { 
    this.incrementTimer(); // passing the incrementTimer function in here so I have access to this.timer
    }, this.interval_in_milliseconds);
}
incrementTimer(){
  this.counter++;
  console.log('counter ' + this.counter);
}
onClickGameButton(start_or_stop:string){
  // TODO: replace the start or stop with a method that sees which id of button was pressed
  console.log('onClickGameButton ' + start_or_stop);
  this.game_is_running = start_or_stop == 'start';
  (this.game_is_running)?this.doInitTimer():this.doDestroyTimer();
  this.game_state_text = (this.game_is_running)?this.game_state_text_yes:this.game_state_text_no;
}

<button 
    class="btn btn-primary mr-5"
    [disabled]="game_is_running" 
    (click)="onClickGameButton('start')" 
    id="start_button"
>Start</button>
<button 
    class="btn btn-primary" 
    [disabled]="!game_is_running"
    (click)="onClickGameButton('stop')"
    id="stop_button"
>Stop</button>
<p>{{game_state_text}}</p>

// game-control.component.ts...
// declare event emitters
@Output() gameStartStopStateChangeEventEmitter = new EventEmitter<boolean>();
@Output() incrementTimerEventEmitter = new EventEmitter<number>();
// emit the counter event (found in function incrementTimer())
this.incrementTimerEventEmitter.emit(this.counter);
// emit the game start event (found in function incrementTimer())
this.gameStartStopStateChangeEventEmitter.emit(true);
// emit the game stop event (found in function doDestroyTimer())
this.gameStartStopStateChangeEventEmitter.emit(false);

/*
My events are being emitted via custom functions (and not directly via child template changes)...as such ho changes were made to the child component.  Note that I could trigger an event via event binding...which I did during tinkering 
*/
// item-output.component.html...
<label for="item-input">Add an item:</label>
<input type="text" id="item-input" #newItem>
<button type="button" (click)="addNewItem(newItem.value)">Add to parent's list</button>

// app.component.ts...
onGameStartStopStateChangeEvent(game_is_running){
  console.log('app > onGameStartStopStateChangeEvent(), game_is_running ' + game_is_running);
}
onIncrementTimerEvent(counter){
  console.log('app > onIncrementTimerEvent(), counter ' + counter);
}

// app.component.html...
<app-game-control
  (incrementTimerEventEmitter)="onIncrementTimerEvent($event)" 
  (gameStartStopStateChangeEventEmitter)="onGameStartStopStateChangeEvent($event)" 
></app-game-control>

// component
@Input() property_from_component_odd:{
  the_number: 0;
};

// template
<p>{{property_from_component_odd.the_number}}</p>

// component
odds_property_from_app = [{
  // the_number: 0 this was commented out (see code for details)
}];
onGameStartStopStateChangeEvent(game_is_running){
  console.log('app > onGameStartStopStateChangeEvent(), game_is_running ' + game_is_running);
  if(!game_is_running){
    if(this.counter % 2 === 0){ // if even
      this.evens_property_from_app.push({the_number: this.counter});
    }else{ // else odd
      this.odds_property_from_app.push({the_number: this.counter});
    }
  }
}

// template
<div class="col-xs-6">
  <h2 class="display-2">The Odds</h2>
  <app-odd
    *ngFor="let local_var_odd of odds_property_from_app" 
    [property_from_component_odd]="local_var_odd"
  ></app-odd>      
</div>

doHandleGameIsOver(){
  if(this.number_of_lives == 1){
      console.log('doGameIsOver');
      this.game_over = true;
    }
}

<p *ngIf="game_over;else game_not_over">You can no longer do it.  GAME OVER!</p><!-- this is a directive -->
<ng-template #game_not_over><p>You can do it!</p></ng-template>

sudo npm i -g npm@6
sudo npm install
ng serve