Is it possible to assign (areShipsExpanded$ | async) to variable without *ngIf? Because in case that this is flag true/false when I have: *ngIf="(areShipsExpanded$ | async) as flag" then button is not displaying in case of false.
And I would like something like this:
<button *let="(areShipsExpanded$ | async) as flag"
(click)="expandAllShips(flag)">{{(flag ? "Collapse" : "Expand"}}
</button>
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.
*ngLet implementations out there, but this saved adding another dependency 👍
You can do it using ng-template and ng-container
<ng-template #myTempl let-flag="areShipsExpand">
<button
(click)="expandAllShips(flag)">{{flag ? "Collapse" : "Expand"}}
</button>
</ng-template>
<ng-container *ngTemplateOutlet="myTempl; context:{areShipsExpand: areShipsExpanded$ | async}"></ng-container>
Use the *ngrxLet directive from @ngrx/component
<ng-container *ngrxLet="observableNumber$ as n">
<app-number [number]="n">
</app-number>
</ng-container>
Visibility of the element containing the ngrxLet directive is not affected by the value of the observable expression.
In the next angular (v19), we'll be able to use the following alternative:
@let user = user$ | async;
I've even used this for binding's value
(someObs$ | async).propName
<button (click)="expandAllShips(flag)">{{(areShipsExpanded$ | async ? "Collapse" : "Expand"}} </button>(click)="expandAllShips(flag)because of that?areShipsExpanded$in component and assign it to aflagproperty?