With

The Angular library with provides the structural directive WithDirective that allows you to contextualize parts of your views.

Summary

• Installation
• Import WithModule
• Usage

Installation

npm install --save @olop/ng-with

Import WithModule

my.module.ts

import { NgModule } from "@angular/core";
import { WithModule } from "@olop/ng-with";

@NgModule({
  imports: [WithModule],
})
export class MyModule {}

Usage

my.component.ts

import { Component } from "@angular/core";
import { Observable, of } from "rxjs";

interface Gear {
  brand: string;
  model: string;
  nbVoice: number;
  nbKeys: number;
}

@Component({
  templateUrl: "./my.component.html",
})
export class MyComponent {
  public record: Gear[] = [
    {
      brand: "Roland",
      model: "G-800",
      nbVoice: 128,
      nbKeys: 76,
    },
    {
      brand: "Korg",
      model: "Triton",
      nbVoice: 62,
      nbKeys: 61,
    },
  ];

  public o$: Observable<Gear>;

  constructor() {
    this.o$ = of(this.record[1]);
  }
}

my.component.html

<ng-container *pvoWith="record[0] as o">
  <p>{{ o.brand }} {{ o.model }}, {{o.nbVoice}} voices polyphony.</p>
</ng-container>

<ng-container *pvoWith="o$ | async as o">
  <p>{{ o.brand }} {{ o.model }}, {{o.nbKeys}} notes keyboard.</p>
</ng-container>