Submodule 22.1: Angular and Reactive programming - Practice

Introduction

In this submodule, you will get your first experience with Observables in Angular. You will modify the services to use Observables.
You will then also enable the components to subscribe to the observables and make use of them to obtain the data. You will :

• Make use of observables within your Angular application
• Obtain data by subscribing to the observables within your components.

In order to create applications with reactive programming, we will use the RxJS library. This library is by default included within the Angular as is shown in the image below:

Updating the Services

Open dish.service.ts and update its methods as follows:

...
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/delay';
import 'rxjs/add/observable/of';
...
@Injectable()
export class DishService {
 constructor() { }
 getDishes(): Observable<Dish[]> {
   return Observable.of(DISHES).delay(2000);
 }
 getDish(id: number): Observable<Dish> {
   return Observable.of(DISHES.filter((dish) => (dish.id === id))[0]).delay(2000);
 }
}

Note 

• The import of  { Observable } from 'rxjs/Observable';
  The import of a couple of operators that we need in our dish service. We use these operators just to check that the Observables work.
  • import 'rxjs/add/operator/delay'
  • import 'rxjs/add/observable/of'
  Also, while testing if observables work you should keep in mind the things below:
  • • If you want to emit only one value from your Observable, you will use the of method and this will take in whatever value that you want to emit in there. 
    • The delay(2000) we want to delay the emitting of the value by two seconds

• The Observable<Dish[]> in the getDishes method. It returns an Observeble of Dish array instead of the Dish array itself. We will now update our service to return Observables, and we will update the components to make use of Observables. The reason is that when we update our services to use the HTTP service to go to a server to fetch the data, then in Angular, the HTTP methods will return Observables. Also, the services can simply pass the Observables to our components and let the components subscribe to these Observables and make use of the data that they obtained. 
• The return Observable.of(DISHES) to return those Dishes. 

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.

Update dishdetail.component.ts

Similarly update dishdetail.component.ts to subscribe to the observables from the service.

ngOnInit() {
  this.dishservice.getDish(id).subscribe(dish => this.dish = dish);
 }

Here the process is similar to what we did in the menu component.ts, but now we take only the selected dish which comes from the filter applied in the array.

The results

With the previous code configured, open your Terminal, go to the angularChocoYourname  angular-sub-folder and run ng serve to run your application in development mode. In your browser navigate to the URL localhost:4200 

As you can see the content of the pages appear with a delay of two seconds. 

Do a Git commit with the message "Angular RxJs Introduction".