@avine/ng-if-non-nullish NPM

IfNonNullish

Nullish coalescing operator as Angular structural directive and more...

Demo

Installation

Import IfNonNullishDirective (standalone directive) in your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IfNonNullishDirective } from '@avine/ng-if-non-nullish';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IfNonNullishDirective],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use ifNonNullish directive in your app.component.ts:

import { Component } from '@angular/core';
import { interval, Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `<div *ifNonNullish="data$ | async as value">{{ value }}</div>`,
})
export class AppComponent {
  data$: Observable<false | null> = interval(1000).pipe(map((i) => (i % 2 ? false : null)));
}

Unlike ngIf directive, falsy values like false, "" or 0 are rendered. Only nullish values like null or undefined are not rendered.

So, in the example above, false will be rendered while null will not.

Usage

Rendering data

Render data using "as" syntax or "implicit" syntax.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ifNonNullish="data">{{ data }}</div>
    <div *ifNonNullish="data as value">{{ value }}</div>
    <div *ifNonNullish="data; let value">{{ value }}</div>
  `,
})
export class AppComponent {
  data: number | null = 0;
}

Rendering fallback template

Use fallback: input to provide a templateRef when data is nullish.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *ifNonNullish="data as value; fallback: fallbackTemplate">
      {{ value }}
    </div>
    <ng-template #fallbackTemplate>
      <i>Fallback</i>
    </ng-template>
  `,
})
export class AppComponent {
  data = undefined;
}