CODEWITHSUNDEEP
angularasynchronousobservable
AvailableName
AvailableName

Reputation: 706

Angular async pipe with as and let

I have a store state that I'm getting using an observable and the async pipe. I'm using the as syntax to read the returned object.
This object is complex, and has fields that are referenced by another async observable to display information.
Could I do something like the following? 

<div *ngIf="(fileObs$ | async) as files; let fileList= files[user.UserId]">
<div *ngFor="let file of fileList">
  ...
</div>
<!-- instead of -->
<div *ngFor="let file of files[user.UserId]">
  ...
</div>

Upvotes: 6

Views: 11868

Answers (1)

Amit Chigadani
Amit Chigadani

Reputation: 29775

You can use ng-template to declare new variable fileList and use ng-container to wait for asynchronous data to load which then activates the template

<ng-container *ngTemplateOutlet="files; context:{file :fileObs$ | async}"></ng-container>

<ng-template #files let-fileList="file[user.UserId]">

   File List 
   <br>-------
   <div *ngFor="let file of fileList ">
      {{file}}
    </div>
</ng-template>

DEMO

I am not filtering user.UserId in my demo, but you can definitely do that while assigning data to fileList as let-fileList="file[user.UserId]"

Upvotes: 7

Related Questions