@avine/ng-if-non-nullish
TypeScript icon, indicating that this package has built-in type declarations

16.0.0 • Public • Published

IfNonNullish

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

Demo

Check out demo here.

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;
}

License

MIT

/@avine/ng-if-non-nullish/

    Package Sidebar

    Install

    npm i @avine/ng-if-non-nullish

    Weekly Downloads

    1

    Version

    16.0.0

    License

    MIT

    Unpacked Size

    28.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • avine