Awesome

ngx-nullish

🔨 Angular Structural Directive which replace *ngIf by Nullish Coalescing operator.

Give a ⭐️ if this project helped you!

Motivation

Nobody likes "Falsy Values".

When in your stream (RxJS) are numbers (include 0), *ngIf will coerce 0 to false, means UI will not update.

Preview 🎉

https://piecioshka.github.io/ngx-nullish-demo/

Features

• ✅ Returns falsy only for: null, undefined
  • *ngIf returns falsy for: null, undefined, 0, -0, false, NaN, ''

Installation

npm install ngx-nullish

Usage

1. Import deps

   import { NgxNullishModule } from 'ngx-nullish';
   
   @NgModule({
       imports: [
           ...
           NgxNullishModule
       ],
       ...
   })
   export class AppModule { }
   

2. Update template

   <p *ngIf="numbers$ | async as num">
       {{ num }}
   </p>
   

   replace to:

   <p *ngxNullish="numbers$ | async as num">
       {{ num }}
   </p>
   

Deployment

Please run a script:

./scripts/deploy.sh

License

The MIT License @ 2020