This library provides a way to make properties nullable in Angular templates.
✓ Angular 20 compatible
Here's the demo
- Lightweight
- No dependencies!
- Use yarn (or npm) to install the package
yarn add ngx-nullable - Add
provideNullableinto 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 }) ] })<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>@Component({ // ... }) class Example { private readonly nullable = inject(NgxNullableService); public readonly input = signal<string>(''); public readonly computed = computed(() => this.nullable.fromString(this.input())); }| 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 |
None
Copyright © 2024 - 2025 Dominik Hladik
All contents are licensed under the MIT license.