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?
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>
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.