How to avoid having 2 times | async in this situation (4.0.0)?

Question

I would like to avoid to use .subscribe() in this component. I tried *ngIf="user$ | async as user" but it did not work.

How can I make a local variable with user$ | async un order to use it at different places in this view?

<app-xpbar *ngIf="user$ | async"></app-xpbar>

<header class="header">

  <app-header-common
    (onSearch)="searching($event)">
  </app-header-common>

  <app-header-user
    [user]="user$ | async"
    (onLogin)="login($event)"
    (onTrial)="trial($event)">
  </app-header-user>

</header>

Günter Zöchbauer · Answer 1 · 2017-03-29T10:35:47.863

3

Update

As @yurzui pointed out, this only works if the references to the introduced variable user are within the <pp-xpbar> element where it's introduced. Otherwise the variable won't be in scope (like in the code example below)

Original

In Angular4 you can use

<app-xpbar *ngIf="user$ | async; let user"></app-xpbar>

<header class="header">

  <app-header-common
    (onSearch)="searching($event)">
  </app-header-common>

  <app-header-user
    [user]="user"
    (onLogin)="login($event)"
    (onTrial)="trial($event)">
  </app-header-user>

</header>

See also

For the as syntax mentioned in the comments see

https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc4-2017-03-17

edited Mar 29 '17 at 10:35

answered Mar 29 '17 at 08:52

Günter Zöchbauer

623,577
216
2,003
1,567

Actually I also tried that but It did not work. I'll try again then. – Tom Mar 29 '17 at 08:53
What Angular version? – Günter Zöchbauer Mar 29 '17 at 08:53
4.0.0. But I tried `user$ | async as user` not `user$ | async; let user`. – Tom Mar 29 '17 at 08:54
I think `let user` has scope within `*ngIf` – yurzui Mar 29 '17 at 08:57
Thanks again for pointing out my mistakes @yurzui I thought I checked that the `` closes after the ``. Seems like I need better glasses. – Günter Zöchbauer Mar 29 '17 at 08:57
Yes it does not seem to work. Putting `{{user | json}}` next to `` does not show the result. – Tom Mar 29 '17 at 08:59
@Tom that's expected. I just missed that `` closes at the same line. Perhaps you can move `*ngIf` to a common parent element? – Günter Zöchbauer Mar 29 '17 at 09:00
1

Ok so I guess my only other possibility is to query the user in the `ParentComponent` and give it to this one. – Tom Mar 29 '17 at 09:01

score 2 · Answer 2 · answered Mar 29 '17 at 09:14

You can try to create structural directive like:

ng-async.directive.ts

@Directive({ selector: '[ngAsync]' })
export class NgAsync {
   constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}

   @Input()
   set ngAsync(variable: any) {
      this.vcRef.clear();
      this.vcRef.createEmbeddedView(this.templateRef, { $implicit: variable });
   }
}

Then you can use it the following way

view.html

<ng-container *ngAsync="user$ | async; let user">
  <app-xpbar *ngIf="user"></app-xpbar>

  <header class="header">

    <app-header-common
      (onSearch)="searching($event)">
    </app-header-common>

    <app-header-user
      [user]="user"
      (onLogin)="login($event)"
      (onTrial)="trial($event)">
    </app-header-user>

  </header>
</ng-container>

Looks pretty nice. I'm going to try that. Thank you @yurzui. — Tom, Mar 29 '17 at 09:18
The main disadvantage is destroying all elements after updating `user` — yurzui, Mar 29 '17 at 09:21
Yes you are right. I'll stick with a parent component then. But I'll keep this directive. It can be usefull. — Tom, Mar 29 '17 at 09:23

score 0 · Answer 3 · answered Mar 29 '17 at 09:32

0

After thinking of pros and cons of differents propositions, I'll go with a ParentComponent event if it's here only for getting user stream. Thanks everyone.

answered Mar 29 '17 at 09:32

Tom

785
10
26

How to avoid having 2 times | async in this situation (4.0.0)?

3 Answers3