Submodule 22.3: Angular HTTP Client - Practice

Updating Menu Component

Open menu.component.ts and update it as follows:

import { Component, OnInit, Inject } from '@angular/core';
...
 constructor(private dishService: DishService,
 @Inject('BaseURL') public BaseURL) { }
...

MenuComponent, injects the DishService and calls the getDishes() service method.

Open menu.component.html and update it as follows:

src="{{BaseURL + dish.image}}"

Now the reason why we injected the BaseURL within the component is that, in the template, we are obtaining the dish.image . This dish.image needs to be obtained from the json-server. So, we need to update the source to be BaseURL + dish.image. In order for this to work correctly, we need to enclose the src within quotes.