ngx-nullable

NgxNullable

This library provides a way to make properties nullable in Angular templates.

✓ Angular 21 compatible

Here's the demo

• Lightweight
• No dependencies!

🛠️ Install

• Use yarn (or npm) to install the package

yarn add ngx-nullable

• Add provideNullable into your config (optional)

import { provideNullable } from 'ngx-nullable';

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideNullable({
      character: '---',
      separator: ' | ',
      displayZero: true
    })
  ]
};

or module

  import { provideNullable } from 'ngx-nullable';

  @NgModule({
   // ...
   providers: [
     // ...
     provideNullable({
       character: '---',
       separator: ' | ',
       displayZero: true
     })
   ]
  })

🚀 Quick start

Pipe example

<ul>
  <li>{{ -1000 | ngxNullable }}</li>
  <li>{{ 1000 | ngxNullable }}</li>
  <li>{{ 0 | ngxNullable }}</li>
  <li>{{ null | ngxNullable }}</li>
  <li>{{ undefined | ngxNullable }}</li>
  <li>{{ 'string' | ngxNullable }}</li>
  <li>{{ '' | ngxNullable }}</li>
  <li>{{ ' ' | ngxNullable }}</li>
</ul>

<ul>
  <li>{{ ['', ' ', undefined, null] | ngxNullableJoin }}</li>
  <li>{{ ['AAA', 'BBB', 'CCC'] | ngxNullableJoin }}</li>
  <li>{{ ['AAA', '', ' ', undefined, null, 'BBB'] | ngxNullableJoin }}</li>
  <li>{{ [] | ngxNullableJoin }}</li>
</ul>

Signals example

@Component({
  // ...
})
class Example {
  private readonly nullable = inject(NgxNullableService);
  public readonly input = signal<string>('');
  public readonly computed = computed(() => this.nullable.fromString(this.input()));
}

🛠️ Options

Root options

Option	Type	Default	Description
character	string	'—'	The character to display when the value is null or undefined
separator	string	', '	The separator to use when joining multiple values
displayZero	boolean	true	Whether to display zero when the value is zero

📦 Dependencies

None

🪪 License

Copyright © 2024 - 2025 Dominik Hladik

All contents are licensed under the MIT license.