ngrxLet with multiple observables

[yringler]

What's best practice if there's a piece of DOM which depends on multiple observables?
Currently we have nested ng-containers, which is OK - it doesn't make the template more complex - but not pretty.

Is it reccomended to combine the observables in the component with a zip or something?
Is there a binding syntax which I'm missing?

This should probably be documented in the right place

[markostanimirovic]

@yringler

The ngrxLet directive works with single Observable. Two ways to avoid nested ng-containers:

1. Combine multiple Observables with combineLatest operator:

@Component({
  template: `
    <ng-container *ngrxLet="vm$ as vm">
      <p>X: {{ vm.x }}</p>
      <p>Y: {{ vm.y }}</p>
    </ng-container>
  `
})
export class MyComponent {
  readonly x$ = of(1);
  readonly y$ = of(2);
  readonly vm$ = combineLatest({ x: this.x$, y: this.y$ });
}

2. Use ngIf + ngrxPush:

@Component({
  template: `
    <ng-container *ngIf="{ x: x$ | ngrxPush, y: y$ | ngrxPush } as vm">
      <p>X: {{ vm.x }}</p>
      <p>Y: {{ vm.y }}</p>
    </ng-container>
  `
})
export class MyComponent {
  readonly x$ = of(1);
  readonly y$ = of(2);
}

I suggest the first one.

[yringler]

Thank you!
I'll see when I have time to open a PR to get this into the docs.