Submodule 22.3: Angular HTTP Client - Practice

Updating the Dish Service

Open dish.service.ts file and update its contents as follows:

...
import { HttpClient } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { Dish } from '../shared/dish';

@Injectable()
export class DishService {
 constructor(private http: HttpClient) { }
 getDishes(): Observable<Dish[]> {
 return this.http.get<Dish[]>(baseURL + 'dishes');
 }
 getDish(id: number): Observable<Dish> {
 return this.http.get<Dish>(baseURL + 'dishes/' + id);
 }
}

Note the injection of the HttpClient into the class DishService

DishService requests JSON data from the server and fetches these with a get() method on HttpClient, this.http.get<Dish[]>().

HttpClient.get constructs an Observable with configured GET request and when the Observable instance is subscribed, GET request is executed on the server.