Angular route's async resolver is still Observable

Issue

I noticed that when you use an async route resolver in angular the value remains an Observable. For example, if you have a route like this

{
    path: '',
    component: FooComponent,
    resolve: { bar: barResolver },
},

And barResolver as follows

const barResolver: ResolveFn<string[]> = (): Observable<string[]> => {
    return of(['f', 'o', 'o']);
};

DEMO

You cannot directly access this data via activatedRoute.data as it is still an Observable, so you have to do something like

{{activatedRoute.data | async | json}}

Ideally I would like to do

{{activatedRoute.data | json}}

Is there a way to have the data available in activatedRoute.data and not the observable?

Solution

You can access the snapshot of the activatedRoute to directly access the property like so!

{{(activatedRoute && activatedRoute.snapshot && activatedRoute.snapshot.data) | json}}

Note: Since the example stackblitz you provided does not render inside a router-outlet the data is empty!

Answered By - Naren Murali