You use the @Output decorator when a component is supposed to notify a parent when something occurs. For this purpose, you use EventEmitter, Angular's events abstraction. Then the parent component can subscribe to these events using event bindings and respond to them.

Let's use @Output in the category menu-related components:

1. Open category-menu-item.component.ts:
   1. Define an EventEmitter field named selected with an @Output decorator.
   2. Implement a function that emits the event with the same category name as the payload:

import { Component, Input, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-category-menu-item',
  templateUrl: './category-menu-item.component.html',
  styleUrls: ['./category-menu-item.component.css']
})
export class CategoryMenuItemComponent {
  @Input() categoryName: string;
  @Output() selected = new EventEmitter<string>();
 
  onSelected() {
    this.selected.emit(this.categoryName);
  }
}

2. In category-menu-item.component.html, bind the click to the onSelected function:

<div class="container" (click)="onSelected()">
  <span>{{ categoryName }}</span>
</div>

3. In category-menu.component.ts, do the following:
   1. Define an EventEmitter field, categoryChanged, with an @Output decorator
   2. Implement a function that emits the event with the category according to the name as the event payload:

import { Component, Input, EventEmitter, Output } from '@angular/core';
import { Category } from '../../../model';
 
@Component({
  selector: 'app-category-menu',
  templateUrl: './category-menu.component.html',
  styleUrls: ['./category-menu.component.css']
})
export class CategoryMenuComponent {
  @Input() categories: Category[];
  @Output() categoryChanged = new EventEmitter<Category>
  ();
 
  onCategorySelected(categoryName: string) {
    const cat = this.categories.find(c => c.name === 
     categoryName);
    this.categoryChanged.emit(cat);
  }
}

4. In category-menu.component.html, bind to the menu items' selected event:

<ul>
  <li *ngFor="let c of categories">
      <app-category-menu-item
        [categoryName]="c.name"
        (selected)="onCategorySelected($event)"
      >
      </app-category-menu-item>
  </li>
</ul>

5. In products-page.component.ts, implement a function to handle category changes with a simple alert message:

import { Component, OnInit } from '@angular/core';
import { Category } from '../../../model';
 
@Component({
  selector: 'app-products-page',
  templateUrl: './products-page.component.html',
  styleUrls: ['./products-page.component.css']
})
export class ProductsPageComponent implements OnInit {
  categories: Category[] = [
    {name: 'Books'},
    {name: 'Appliances'},
    {name: 'Food'},
  ];
  selectedCategory: Category;
 
  constructor() { }
 
  ngOnInit() {
  }
 
  onCategoryChanged(category: Category) {
    this.selectedCategory = category;
    alert(category.name);
  }
}

6. In products-page.component.html, bind to the categoryChanged event:

<app-category-menu
  [categories]="categories"
  (categoryChanged)="onCategoryChanged($event)"
></app-category-menu>

Congratulations! You can now run the app, and you will see the alerted message as you click on different menu items.