https://github.com/typeheim/fluent-ng
https://github.com/typeheim/fluent-ng
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/typeheim/fluent-ng
- Owner: typeheim
- License: mit
- Created: 2020-05-31T10:00:57.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T12:33:27.000Z (over 3 years ago)
- Last Synced: 2024-12-27T08:29:15.147Z (over 1 year ago)
- Language: TypeScript
- Size: 2.09 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# FluentNG
Collection of Angular extensions
# Getting Started
Install package
```shell
yarn add @typeheim/fluent-ng
//or
npm -i @typeheim/fluent-ng
```
## SubscribePipe
SubscribePipe is an alternative to Angular core AsyncPipe. SubscribePipe is tuned to work only with observables and support setting default values instead of `null`.
Unlike AsyncPipe, SubscribePipe call `markDirty`, introduced with Ivy, instead of `markForCheck` giving better performance, resource utilization and smooth UI updates.
```typescript
@Component({
template: `
{{observableSource | subscribe}}
{{observableSource | subscribe: 'default text' }}
`
})
class StreamSampleComponent {
observableSource = new Subject()
}
```
## StreamPipe
StreamPipe is an alternative to Angular core AsyncPipe. StreamPipe is tuned to work only with observables and support setting default values instead of `null`.
Unlike AsyncPipe, StreamPipe call `detectChanges` of `ChangeDetectorRef` instead of `markForCheck` that marks the component tree dirty up to the root component, and then re-renders the full path until the component that caused the change, and all its child components related to the change. In the end, StreamPipe, triggers change detection and rendering only in the very component where the change got introduced, and the child components effected by the change giving better performance and smooth UI chnages.
```typescript
@Component({
template: `
{{observableSource | stream}}
{{observableSource | stream: {default: 'default text'} }}
`
})
class StreamSampleComponent {
observableSource = new Subject()
}
```
## AwaitPipe
AwaitPipe works the same way as StreamPipe but instead of observables it expects promise.
```typescript
@Component({
template: `
{{promiseSource | await}}
{{promiseSource | await: {default: 'default text'} }}
`
})
class PromiseSampleComponent {
promiseSource = new Promise((resolve) => resolve('it works!'))
}
```