how to use async inside html

Question

How can I include async here in this code for user?

<div *ngIf="usersService.loaded$ | async">
<nb-card>
  <nb-card-header>
    <h1> {{ user?.name }} | {{ user?.age }} </h1>
  </nb-card-header>
</nb-card>

The user is being initiated as follows using a method from the store:

    this.user = this.route.params
      .pipe(
        takeUntil(this.destroyed$),
        switchMap(({ userId }) => this.usersService.getSelectedUser(userId))
      );

Does this answer your question? Angular async pipe and object property — The Fabio
– The Fabio, Commented Mar 1, 2022 at 21:00

Chris Hamilton · Accepted Answer · 2022-03-01 20:58:21Z

5

Just surround the async pipe call with brackets:

<div *ngIf="usersService.loaded$ | async">
  <nb-card>
    <nb-card-header>
      <h1>{{ (user | async)?.name }} | {{ (user | async)?.age }}</h1>
    </nb-card-header>
  </nb-card>
</div>

answered Mar 1, 2022 at 20:58

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rob.b · Accepted Answer · 2022-03-02 01:07:42Z

Here is one solution:

<div *ngIf="usersService.loaded$ | async">
    <nb-card>
        <nb-card-header>
            <ng-container *ngIf="user | async as usr; else notFound">
                <h1>{{usr.name}} | {{usr.age}}</h1>
            </ng-container>
        </nb-card-header>
    </nb-card>
</div>
<ng-template #notFound>
    <div class="error">could not locate the user</div>
</ng-template>

If you want to use the user in other parts of the card, you can move the *ngIf="user | async as usr" to the <nb-card> element. That way the user would be available in any card content.

<div *ngIf="usersService.loaded$ | async">
    <nb-card *ngIf="user | async as usr; else notFound">
        <nb-card-header>
            <h1>{{usr.name}} | {{usr.age}}</h1>
        </nb-card-header>
        <nb-card-content>
           {{usr.bio}}
        <nb-card-content>
    </nb-card>
</div>
<ng-template #notFound>
    <div class="error">could not locate the user</div>
</ng-template>

In the two cases above, if the user observable's value is null, then the *ngIf will fail. In some cases, you may want to use a default value when the user is null. I have been using this little trick that I probably learned somewhere on SO :)

<div *ngIf="usersService.loaded$ | async">
    <nb-card *ngIf="{usr: user | async} as obs">
        <nb-card-header>
            <h1>{{obs.usr?.name || 'Jane Doe'}} | {{obs.usr?.age || '100'}}</h1>
        </nb-card-header>
        <nb-card-content>
           {{obs.usr?.bio || 'Very Famous'}}
        <nb-card-content>
    </nb-card>
</div>

Actually, I would probably join the two observables like this...

<ng-container *ngIf="{loaded: usersService.loaded$ | async, usr: user | async} as obs">
    <div *ngIf="obs.loaded">
      <nb-card>
          <nb-card-header>
              <h1>{{obs.usr?.name || 'Jane Doe'}} | {{obs.usr?.age || '100'}}</h1>
          </nb-card-header>
          <nb-card-content>
            {{obs.usr?.bio || 'Very Famous'}}
          <nb-card-content>
      </nb-card>
    </div>
</ng-container>

Collectives™ on Stack Overflow

how to use async inside html

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related