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