NgxNullable


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

> ✓ _Angular 21 compatible_

Here's the demo

- Lightweight
- No dependencies!

🛠️ Install

1. Use yarn (or npm) to install the package

``terminal
yarn add ngx-nullable
`

2. Add provideNullable into your config (optional)

`typescript
import { provideNullable } from 'ngx-nullable';

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

or module

`typescript
import { provideNullable } from 'ngx-nullable';

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

🚀 Quick start

$3

`html


• {{ -1000 | ngxNullable }}


• {{ 1000 | ngxNullable }}


• {{ 0 | ngxNullable }}


• {{ null | ngxNullable }}


• {{ undefined | ngxNullable }}


• {{ 'string' | ngxNullable }}


• {{ '' | ngxNullable }}


• {{ ' ' | ngxNullable }}

• {{ ['', ' ', undefined, null] | ngxNullableJoin }}


• {{ ['AAA', 'BBB', 'CCC'] | ngxNullableJoin }}


• {{ ['AAA', '', ' ', undefined, null, 'BBB'] | ngxNullableJoin }}


• {{ [] | ngxNullableJoin }}


`

$3

`Typescript

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

``

🛠️ Options

$3

| 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].

[mit license]: LICENSE