Using async pipe: Has any data loaded yet?


I’m using the async pipe to load data returned from an Observable directly into my template.

public myData$ = Observable<DataResponse[]>;
ngOnInit(): void {
    this.myData$ = this.myService.getData();

It loads just fine into my template:

<ng-container *ngFor='let data of dataStatus$ | async'>

But, i inherited a custom progress bar that shows until data is loaded via an attribute:

<my-progress-bar [showProgress]='???'

So, under the showProgress attribute I’ve got to determine when to shut off the progress bar. I know that all docs point to using the ;else #templateLiteral. I’ve tried accessing the complete method of the Observable and also using


…but that’s not working either. Is there some property of the Observable I can use to pass into the progress component? Thanks for any helpful tips.

<my-progress-bar [showProgress]='???'>
        <ng-container *ngFor='let data of dataStatus$ | async'>
            <tr *ngIf='!!data'>
                <td>/* all my stuff */</td>


Use a typical construction <ng-container *ngIf="{data:(dataStatus$ | async) as dataStatus}>

<ng-container *ngIf="{ data: (dataStatus$ | async) } as data">
  <div *ngIf="!">loading...</div>
  <div *ngFor="let i of">{{ i }}</div>

Answered By – Eliseo

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.