Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Celtian/ngx-nullable
This library provides a way to make properties nullable in Angular templates.
https://github.com/Celtian/ngx-nullable
angular library
Last synced: 1 day ago
JSON representation
This library provides a way to make properties nullable in Angular templates.
- Host: GitHub
- URL: https://github.com/Celtian/ngx-nullable
- Owner: Celtian
- License: mit
- Created: 2024-10-21T18:24:50.000Z (26 days ago)
- Default Branch: master
- Last Pushed: 2024-11-11T18:42:49.000Z (5 days ago)
- Last Synced: 2024-11-11T18:53:15.416Z (5 days ago)
- Topics: angular, library
- Language: TypeScript
- Homepage:
- Size: 520 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-nullable - This library provides a way to make properties nullable in Angular templates. (Table of contents / Third Party Components)
- awesome-angular - ngx-nullable - This library provides a way to make properties nullable in Angular templates. (Table of contents / Third Party Components)
README
NgxNullable
[](https://badge.fury.io/js/ngx-nullable)
[](https://www.npmjs.com/ngx-nullable)
[](https://www.npmjs.com/ngx-nullable)
[](https://snyk.io/advisor/npm-package/ngx-nullable)
[](https://codecov.io/gh/celtian/ngx-nullable/)
[](https://github.com/celtian/ngx-nullable/)
[](https://github.com/celtian/ngx-nullable/)
[](http://hits.dwyl.com/celtian/ngx-nullable)
This library provides a way to make properties nullable in Angular templates.
> ✓ _Angular 18 compatible_
Here's the [demo](http://celtian.github.io/ngx-nullable/)
- 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
### Pipe example
```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 }}
```
### Signals example
```Typescript
@Component({
// ...
})
class Example {
private readonly nullable = inject(NgxNullableService);
public readonly input = signal('');
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 [Dominik Hladik](https://github.com/Celtian)
All contents are licensed under the [MIT license].
[mit license]: LICENSE