Advantage of mapping with a async binding vs a concrete object in Angular?

Is there any advantage or benefit to using a async binding vs just mapping to a concrete object when my service call returns with data for my HTML page?

Here is an example of the two options.

  1. Map to a concrete object
// component
event: any;

// ngOnInit()
this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => {
  this.event = response;
}, error => {
  console.log(error);
});

// service
getEvent(id: number): Observable<any> {
  return this.http.get<any>(this.baseUrl + 'events/' + id);
}
<div>{{event.title}}</div>
<div>{{event.date}}</div>
  1. map to a async binding
// component
event$: Observable<any> = of (undefined);

// ngOnInit
this.event$ = this.eventService.getEvent(this.id).pipe(take(1),
  catchError(error => {
    console.log(error);
    return throwError(error);
  }));

// service
getEvent(id: number): Observable<any> {
  return this.http.get<any>(this.baseUrl + 'events/' + id);
}
<div>{{(event$ | async).title}}</div>
<div>{{(event$ | async).date}}</div>