AsyncPipeline
Do you still use streams in an old fashioned way? 🧐
Async pipeline bring RxJS operators in Angular templates! 🔥 Useful custom operators included!
Getting started
npm i ngx-async-pipeline- Import required modules:
import { CommonModule } from '@angular/common';
import { NotModule, LengthModule, SkipModule } from 'ngx-async-pipeline';
@NgModule({
imports: [CommonModule, NotModule, LengthModule, SkipModule]
})
export class AppModule {}- Use pipes
<app-errors *ngIf="errors$ | skip:3 | length | not | async"></app-errors>- Be awesome 🌈
Available pipes
Custom pipes
Here's a list of custom pipes introduced to bring simplicity and clarity to Angular templates.
RxJS
Here's a list of RxJS operators provided as pipes. Each RxJS pipe has the same API as appropriate operator.
- debounce
- debounceTime
- delay
- distinctUntilChanged
- first
- last
- mapTo
- pairwise
- skip
- skipLast
- skipUntil
- skipWhile
- take
- takeLast
- takeUntil
- takeWhile
- throttle
- throttleTime
Custom pipes
LengthPipe
// app.module.ts
import { LengthModule } from 'ngx-async-pipeline';
@NgModule({
imports: [LengthModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | length | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}length operator has to be used to retrieve the length of the string or array title$ | length.
LogPipe
// app.module.ts
import { LogModule } from 'ngx-async-pipeline';
@NgModule({
imports: [LogModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | log | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}log operator will console.log each value from the stream title$ | log.
NotPipe
// app.module.ts
import { NotModule } from 'ngx-async-pipeline';
@NgModule({
imports: [NotModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
<div *ngIf="data$ | length | not | async">
No Data
</div>
`
})
export class AppComponent {
data$: Observable<string[]> = of([
'Hello, Async Pipeline!',
'Some another string',
'And one more string',
'And so on...'
]);
}not operator will negate the value from the stream using ! operator condition$ | not
GetPipe
// app.module.ts
import { GetModule } from 'ngx-async-pipeline';
@NgModule({
imports: [GetModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ data$ | get: 'title' | async }}
`
})
export class AppComponent {
data$: Observable<{ title: string }> = of({ title: 'Here is a title!' });
}Using get pipe you can get a value from an object by key provided as a param get:'title'. Or, get could be used to retrieve a specific item from an array get:3.
IsEmptyPipe
// app.module.ts
import { IsEmptyPipe } from 'ngx-async-pipeline';
@NgModule({
imports: [IsEmptyModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ someArrayOrString$ | isEmpty | async }}
`
})
export class AppComponent {
someArrayOrString$: Observable<Array<number>>> = of([1, 2, 3]);
}isEmpty operator has to be used to retrieve if a string or array is empty (e.g. Array.length / String.length equals 0) arrayOrString$ | isEmpty.
RxJS pipes
DebounceTimePipe
// app.module.ts
import { DebounceTimeModule } from 'ngx-async-pipeline';
@NgModule({
imports: [DebounceTimeModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | debounceTime: 1000 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for debounceTime operator.
DelayPipe
// app.module.ts
import { DelayModule } from 'ngx-async-pipeline';
@NgModule({
imports: [DelayModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | delay: 1000 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for delay operator.
DistinctUntilChangedPipe
// app.module.ts
import { DistinctUntilChangedModule } from 'ngx-async-pipeline';
@NgModule({
imports: [DistinctUntilChangedModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | distinctUntilChanged | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for distinctUntilChanged operator.
FirstPipe
// app.module.ts
import { FirstModule } from 'ngx-async-pipeline';
@NgModule({
imports: [FirstModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | first: 3 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for first operator.
LastPipe
// app.module.ts
import { LastModule } from 'ngx-async-pipeline';
@NgModule({
imports: [LastModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | last: 3 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for last operator.
MapToPipe
// app.module.ts
import { MapToModule } from 'ngx-async-pipeline';
@NgModule({
imports: [MapToModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | mapTo: 'some other string' | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for mapTo operator.
PairwisePipe
// app.module.ts
import { PairwiseModule } from 'ngx-async-pipeline';
@NgModule({
imports: [PairwiseModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | pairwise | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for pairwise operator.
SkipPipe
// app.module.ts
import { SkipModule } from 'ngx-async-pipeline';
@NgModule({
imports: [SkipModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | skip: 3 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for skip operator.
SkipLastPipe
// app.module.ts
import { SkipLastModule } from 'ngx-async-pipeline';
@NgModule({
imports: [SkipLastModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | skipLast: 3 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for skipLast operator.
TakePipe
// app.module.ts
import { TakeModule } from 'ngx-async-pipeline';
@NgModule({
imports: [TakeModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | take: 3 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for take operator.
TakeLastPipe
// app.module.ts
import { TakeLastModule } from 'ngx-async-pipeline';
@NgModule({
imports: [TakeLastModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | takeLast: 3 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for takeLast operator.
ThrottlePipe
// app.module.ts
import { ThrottleModule } from 'ngx-async-pipeline';
@NgModule({
imports: [ThrottleModule]
})
export class AppModule {}
// app.component.ts
@Component({
template: `
{{ title$ | throttle: 1000 | async }}
`
})
export class AppComponent {
title$: Observable<string> = of('Hello, Async Pipeline!');
}Official documentation for throttle operator.