Submodule 22.1: Angular and Reactive programming - Practice

Update menu.component.ts

Update menu.component.ts as follows to subscribe to the observable returned from the service:

ngOnInit() {
  this.dishService.getDishes().subscribe(dishes => this.dishes = dishes);
 }

So, when you go to the menu component.ts, you will notice that there is a red line under this.dishes . This is because now the dishService.getDishes() is returning an observable and not the Dish array. So in the this.dishes = this.dishService.getDishes();  you have the observable being assigned to a dish array object, which is incorrect. 

How do we reconfigure this code?

We subscribe the MenuComponent to "listen" to the Observable. Your menu component is now able to use the Observable values that are being emitted by the Observable.

So we have the dishService.getDishes, and then the subscribe method chained to it. When the subscribe is called, the dishes will be delivered to you because the getDishes method is returning the observable Observable.of(DISHES) .  So this is what we use as the parameter dishes  in the left side of the arrow function dishes => this.dishes = dishes. We use the arrow function to assign the parameter to the this.dishes. The this.dishes is the variable of the menu.component.ts for which we have already declared its type as Dish[] and is also used in the menu.component.html in the *ngFor structural directive.