daveek / async-pipeline

🌈 RxJS operators for Angular component templates 😱

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.

• length
• log
• not
• get

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.

How can I support the developer?

• Create pull requests, submit bugs, suggest new features or documentation updates 🔧
• Star my GitHub repos ⭐️
• Read me on Medium
• Follow me on Twitter 🐾