Subscribing to an observable in an Angular 2 HTML element

Question

I have an observable producing Users that have an isLoading property, such that this yields the expected result:

{{ (user$ | async).isLoading }}

I would like to be able to use this isLoading property in an HTML attribute, like this:

<button md-raised-button type="submit" [disabled]="user$.isLoading">Login</button>

but no syntax I use seems to do the trick. How do you subscribe to an observable like this in an HTML attribute?

Answer 1

You can use async pipe in html tag like in example below, just don't forget safe operator:

<button md-raised-button type="submit" [disabled]="(user$ | async)?.isLoading">Login</button>

Answer 2

One option you have here, if you've upgraded to Angular 4, is to use *ngIf. You can do something like this:

<div *ngIf="user$ | async; let user">

{{user.isLoading}}    

<button md-raised-button type="submit" [disabled]="user.isLoading">Login</button>

</div>

With *ngIf you can subscribe to the observable with async and assign the value to a variable with let. Then user the variable in other places in your template.

This is a new feature added in Angular 4. Most Angular2 apps can be upgraded to 4 with no changes required.

Hope that helps.