piecioshka / ngx-nullish

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

NgxNullish

⚒ 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>

License

The MIT License @ 2020