0

I normally tend to use Observables in components by passing them into functions through template using myFunction(myObservable$ | async) and it works quite well.

However, in my template I have an output function that emits values to the parent component.

<my-component
   [myInput]="something$ | async"
   (childOutputEmitter)="onChildEmitFunction($event)">
</my-component>

The problem is the onChildEmitFunction() function I need combine both the emitted value ($event) and the myObservable$ | async values.

This doesn't seem to work though: 

<my-component
   [myInput]="something$ | async"
   (childOutputEmitter)="onChildEmitFunction($event, (myObservable$ | async))">
</my-component>

Is there a way to pass the value of myObservable$ to onChildEmitFunction() without subscribing to it and storing the value in another variable?

ignite-me
  • 738
  • 3
  • 14
  • 33

1 Answers1

2

You could use *ngIf directive to use the value from the observable multiple times.

<ng-container *ngIf="something$ | async as something">
  <my-component
     [myInput]="something"
     (childOutputEmitter)="onChildEmitFunction($event, something)">
  </my-component>
</ng-container>

Also note that if async pipe is used with HTTP, each pipe could trigger an individual request.

ruth
  • 29,535
  • 4
  • 30
  • 57