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

Question

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>

Why not subscribe to `areShipsExpanded$` in component and assign it to a `flag` property? — Tim Martens, Jul 27 '18 at 11:07
Sure I can, but I was wondering whether is possible to do it directly from async :) — DiPix, Jul 27 '18 at 11:09
Here's another way from https://stackoverflow.com/a/40751358/2604813 -- — Marcus, Dec 05 '20 at 01:33
Does this answer your question? [How to declare a variable in a template in Angular](https://stackoverflow.com/questions/38582293/how-to-declare-a-variable-in-a-template-in-angular) — geisterfurz007, Mar 24 '21 at 08:43

score 53 · Answer 1 · answered Apr 28 '21 at 19:47

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.

There's a number of `*ngLet` implementations out there, but this saved adding another dependency — Drenai, Mar 18 '22 at 23:22

Amit Chigadani · Answer 2 · 2018-07-27T11:44:19.713

15

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>

DEMO

edited Jul 27 '18 at 11:44

answered Jul 27 '18 at 11:17

Amit Chigadani

28,482
13
80
98

score 8 · Answer 3 · answered Nov 29 '21 at 14:52

8

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.

answered Nov 29 '21 at 14:52

Neutrino

8,496
4
57
83

This is still in the experimental phase. 2022. Angular 14. – Isuru Madusanka Aug 22 '22 at 07:24

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

3 Answers3

Linked

Related