angular getting Observable<HttpEvent<any[]>> inside my html from ts file

Question

I have started working on angular again after almost 2 years and i thought i could grasp from my previous knowledge but i am kind of stuck over here and cannot really understand what i can do. I am using efc for getting data and in services i have the following method

shared-service.ts

getHotelDetails(val:any){ return this.http.get<any>(this.APIUrl+'Hotels/GetHotel/',val); }

In ts i am getting the correct data by using the below code

mycomponent.ts

hotel$!:Observable<HttpEvent<any[]>>;

constructor(private service:SharedService, private _route:ActivatedRoute) {

}

ngOnInit(): void { var Id = this._route.snapshot.params['id']; this.hotel$ = this.service.getHotelDetails(Id); console.log(this.hotel$); }

mycomponent.html

I am trying to use the hotel object in html but cannot iterate or find the attributes inside. The api call is giving a json like the below for api:

https://localhost:44372/api/Hotels/GetHotel/1

{ "hotelId": 1, "name": "pizza", "addresses": [], "comments": [], "hotelFoods": [] }

I just need the code in which i can fetch the name from hotel$ attribute.

I tried ngfor and directly accessing hotel$.id

Answer 1

What you get back from the service is an Observable, you need to subscribe to it in order to access the data. The easiest way to do this in a html template is to use the async pipe.

You need something like this:

{{ (this.hotel$ | async).hotelId }}