This library provides a way to make properties nullable in Angular templates.
✓ Angular 22 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 |
| Angular | ngx-fixed-footer | Install |
|---|---|---|
| >= 22 | 1.x | yarn add ngx-fixed-footer |
| >= 18 < 21 | 0.x | yarn add ngx-fixed-footer@0 |
None
Copyright © 2024 - 2026 Dominik Hladik
All contents are licensed under the MIT license.
