Issue
I have an Observable
defined in my component file. It is updating appropriately when interpolated with double curlys ({{example}}
). But it is not updating inside the template directive, even though I am using an async
pipe.
component.html
<ng-container *ngIf="isLoading$ | async as isLoading; else elseBlock">
is loading
</ng-container>
<ng-template #elseBlock> Add</ng-template> <--- constantly showing elseblock; not working!
is loading: {{ isLoading$ | async }} <--- is working correctly
component.ts
updateIsLoading: any;
isLoading$ = new Observable((observer) => {
observer.next(false);
this.updateIsLoading = function (newValue: boolean) {
observer.next(newValue);
observer.complete();
};
});
handleClick() {
this.updateIsLoading(true); <--- running this line updates interpolated value, but not the if statement
}
Edit
Apparently, commenting out the second async
makes the first behave appropriately.
Solution
This is just a misunderstanding of the async
pipe and/or Observables.
Each instance of isLoading$ | async
creates a separate subscription.
This subscription will execute the callback function, overwriting this.updateIsLoading
with a new function.
So your click handler will only ever fire observer.next(newValue)
for the last isLoading$ | async
subscription.
Ideally you just want to call isLoading$ | async
once and put it into a template variable.
Unfortunately Angular doesn't have a built in directive to just declare a single template variable. Although you can write your own, and there are some packages out there like ng-let
.
You can wrap everything in *ngIf
with as
to get a template variable, but that doesn't work if you want to allow falsey values through.
You can use the ng-template
let-*
syntax to accomplish it. The idea is to define a template, and pass in your async variables as parameters via ngTemplateOutletContext
. The actual rendering is done by an ng-container
.
<ng-container
[ngTemplateOutlet]="myAsyncTemplate"
[ngTemplateOutletContext]="{isLoading: isLoading$ | async}"
></ng-container>
<ng-template #myAsyncTemplate let-isLoading="isLoading">
<ng-container *ngIf="isLoading; else elseBlock">
<p>is loading: {{isLoading}}</p>
</ng-container>
<ng-template #elseBlock> Else Block</ng-template>
<p>is loading: {{isLoading}}</p>
<button (click)="handleClick()">SET TO TRUE</button>
</ng-template>
Stackblitz: https://stackblitz.com/edit/angular-x4msbz?file=src/main.html
Alternatively you can turn the observable into a shared stream like Sergey suggested. That'll let you make any number of subscriptions which all share the same value. Depends on your use case.
Answered By - Chris Hamilton
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.