How to assign result of async pipe to variable without *ngIf in Angular 6

by

Little late to the party here but I found a great example of how to do this from this medium article

You still use *ngIf but you make sure that it always evaluates truthy by passing in a new object with your observable value as a property.

<div *ngIf="{value1: myObs$ | async} as valuesObj">
    {{ valuesObject.value1 }}
</div>

IMO this is still a little hacky but much less hacky than the other answer or creating your own *ngLet directive.

As mentioned in the article, this is also a good way to group together multiple observable values in multiple object properties so you don’t have to have multiple async statements or nested <ng-container> elements.

Leave a Comment