Angular: How to pass boolean async variable in template function?

Question

We can get async pipe as variable with *ngIf

<button *ngIf="account$ | async as account" (click)="parseAccount(account)" type="button"></button>

But of course it won't work for boolean values, for example

<button *ngIf="loggedIn$ | async as loggedIn" (click)="checkAuth(loggedIn)" type="button"></button>

Because loggedIn$ | async can emit false.

Is there any other built-in way to get async values as template variable without custom ngInit directives?

Dzmitry Vasilevsky · Accepted Answer · 2022-04-07 11:52:31Z

6

Just found an answer

<button *ngIf="{ val: loggedIn$ | async } as loggedIn" (click)="checkAuth(loggedIn.val)" type="button"></button>

Maybe a little bit hacky but works

Note that *ngIf is used here not for visibility but as a way to get a template variable

edited Apr 7, 2022 at 11:52

answered Nov 11, 2019 at 10:03

Dzmitry Vasilevsky

1,5302 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Konstantin Schütte Over a year ago

Be aware, that this makes the button instantly visible

Dzmitry Vasilevsky Over a year ago

@dewey yes, but that is expected since *ngIf is used here as a hack to get a variable in the template You basically don't need to provide anything to a callback if it is not visible And if visible - you can just provide true I've edited my answer

Collectives™ on Stack Overflow

Angular: How to pass boolean async variable in template function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related