Навигация

Главный копонент обрабатывает событие клика по навигации:

  
<app-header (selectItem)="onSelectItem($event)"></app-header>
 

Код обрабочика:

  
selectedItem: string = 'recipes';

onSelectItem(item: string) {
  this.selectedItem = item;
}
 

И в зависимости от данного состояния отображает компоненты:

  
<app-recipes *ngIf="selectedItem === 'recipes'"></app-recipes>
<app-shopping-list *ngIf="selectedItem === 'shopping-list'"></app-shopping-list>
  

Шаблон навигации привязывает клики к своему методу selectFromMenu():

  
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
//...
@Output() selectItem = new EventEmitter();

selectFromMenu(item: string) {
    this.selectItem.emit(item);
}
 

Таким образом, когда происходит клик по навигации, всплывает событие selectItem, которое обрабатывает главный компонент и отображает соответствующий компонент.

Передача данных событиями

EventEmitter может не возвращать значение:

  
@Output() selectedItem = new EventEmitter<void>();
  

В app-recipe-item по клику срабатывает this.selectedItem.emit(), который не передает данных, а просто сообщает о факте события. В родительском компоненте app-recipe-list это обрабатывается так:

 
<app-recipe-item
  *ngFor="let recipeEl of recipes"
  [recipe]="recipeEl"
  (selectedItem)="onRecipeSelect(recipeEl)">
</app-recipe-item>
 

В компоненте app-recipe-list методом onRecipeSelect(recipeEl) выбрасывается объект события recipeWasSelected, в котором находится объект выбранного рецепта. И в вышестоящем компоненте это обрабатывается так:

 
<div class="row">
  <div class="col-md-5">
    <app-recipe-list
    (recipeWasSelected)="selectedRecipe = $event"></app-recipe-list>
  </div>
  <div class="col-md-7">
    <app-recipe-detail
    *ngIf="selectedRecipe; else infoText"
    [recipe]="selectedRecipe"
    ></app-recipe-detail>
    <ng-template #infoText>
      <p>Please, select the item

Таким образом событию можно назначать не только метод, но и сразу присвоить переменной компонента переменную события, а так же пользоваться конструкцией *ngIf else, для отображения компонента или заглушки.