{"id":16825897,"url":"https://github.com/tibing/async-pipeline","last_synced_at":"2026-03-02T11:01:57.732Z","repository":{"id":39511790,"uuid":"191716919","full_name":"Tibing/async-pipeline","owner":"Tibing","description":"🌈 RxJS operators for Angular component templates 😱","archived":false,"fork":false,"pushed_at":"2023-01-07T06:20:42.000Z","size":555,"stargazers_count":139,"open_issues_count":32,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T03:22:54.540Z","etag":null,"topics":["angular","angular-pipe","angular-pipes","rxjs","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/tibing/async-pipeline","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tibing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-13T07:53:46.000Z","updated_at":"2024-12-18T17:06:32.000Z","dependencies_parsed_at":"2023-02-06T13:46:28.819Z","dependency_job_id":null,"html_url":"https://github.com/Tibing/async-pipeline","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Tibing/async-pipeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tibing%2Fasync-pipeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tibing%2Fasync-pipeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tibing%2Fasync-pipeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tibing%2Fasync-pipeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tibing","download_url":"https://codeload.github.com/Tibing/async-pipeline/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tibing%2Fasync-pipeline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29999221,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T09:59:02.300Z","status":"ssl_error","status_checked_at":"2026-03-02T09:59:02.001Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-pipe","angular-pipes","rxjs","typescript"],"created_at":"2024-10-13T11:15:40.960Z","updated_at":"2026-03-02T11:01:57.709Z","avatar_url":"https://github.com/Tibing.png","language":"TypeScript","readme":"# AsyncPipeline\n\nDo you still use streams in an old fashioned way? 🧐\n\n![alt text](assets/old-way.png)\n\nAsync pipeline bring **RxJS** operators in Angular templates! 🔥 \nUseful custom operators included!\n\n![alt text](assets/new-way.png)\n\n## Getting started\n\n- `npm i ngx-async-pipeline`\n- Import required modules:\n```typescript\nimport { CommonModule } from '@angular/common';\nimport { NotModule, LengthModule, SkipModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    NotModule,\n    LengthModule,\n    SkipModule,\n  ],\n})\nexport class AppModule {}\n```\n\n- Use pipes\n```html\n\u003capp-errors *ngIf=\"errors$ | skip:3 | length | not | async\"\u003e\u003c/app-errors\u003e\n```\n\n- Be awesome 🌈\n\n## Available pipes\n\n### Custom pipes\n\nHere's a list of custom pipes introduced to bring simplicity and clarity to Angular templates.\n\n- [length](#lengthpipe)\n- [log](#logpipe)\n- [not](#notpipe)\n- [get](#getpipe)\n\n### RxJS\n\nHere's a list of **RxJS** operators provided as pipes. Each **RxJS** pipe has the same API as appropriate operator.\n\n- [debounce](https://rxjs.dev/api/operators/debounce)\n- [debounceTime](#debouncetimepipe)\n- [delay](#delaypipe)\n- [distinctUntilChanged](#distinctuntilchangedpipe)\n- [first](#firstpipe)\n- [last](#lastpipe)\n- [mapTo](#maptopipe)\n- [pairwise](#pairwisepipe)\n- [skip](#skippipe)\n- [skipLast](#skiplastpipe)\n- [skipUntil](https://rxjs.dev/api/operators/skipUntil)\n- [skipWhile](https://rxjs.dev/api/operators/skipWhile)\n- [take](#takepipe)\n- [takeLast](#takelastpipe)\n- [takeUntil](https://rxjs.dev/api/operators/takeUntil)\n- [takeWhile](https://rxjs.dev/api/operators/takeWhile)\n- [throttle](#throttlepipe)\n- [throttleTime](https://rxjs.dev/api/operators/throttleTime)\n\n## Custom pipes\n\n### LengthPipe\n\n```typescript\n// app.module.ts\nimport { LengthModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ LengthModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | length | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n**length** operator has to be used to retrieve the length of the *string* or *array*\n**title$ | length**.\n\n### LogPipe\n\n```typescript\n// app.module.ts\nimport { LogModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ LogModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | log | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n**log** operator will *console.log* each value from the stream\n**title$ | log**.\n\n### NotPipe\n\n```typescript\n// app.module.ts\nimport { NotModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ NotModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    \u003cdiv *ngIf=\"data$ | length | not | async\"\u003e\n      No Data\n    \u003c/div\u003e\n  `,\n})\nexport class AppComponent {\n  data$: Observable\u003cstring[]\u003e = of([\n    'Hello, Async Pipeline!',\n    'Some another string',\n    'And one more string',\n    'And so on...',\n  ]);\n}\n```\n\n**not** operator will negate the value from the stream using **!** operator\n**condition$ | not**\n\n### GetPipe\n\n```typescript\n// app.module.ts\nimport { GetModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ GetModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ data$ | get:'title' | async }}\n  `,\n})\nexport class AppComponent {\n  data$: Observable\u003c{ title: string }\u003e = of({ title: 'Here is a title!' });\n}\n```\n\nUsing **get** pipe you can get a value from an object by key provided as a param\n**get:'title'**. Or, **get** could be used to retrieve a specific item from an array\n**get:3**.\n\n## RxJS pipes\n\n### DebounceTimePipe\n\n```typescript\n// app.module.ts\nimport { DebounceTimeModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ DebounceTimeModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | debounceTime:1000 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *debounceTime* operator.](https://rxjs.dev/api/operators/debounceTime)\n\n### DelayPipe\n\n```typescript\n// app.module.ts\nimport { DelayModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ DelayModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | delay:1000 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *delay* operator.](https://rxjs.dev/api/operators/delay)\n\n### DistinctUntilChangedPipe\n\n```typescript\n// app.module.ts\nimport { DistinctUntilChangedModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ DistinctUntilChangedModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | distinctUntilChanged | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *distinctUntilChanged* operator.](https://rxjs.dev/api/operators/distinctUntilChanged)\n\n### FirstPipe\n\n```typescript\n// app.module.ts\nimport { FirstModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ FirstModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | first:3 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *first* operator.](https://rxjs.dev/api/operators/first)\n\n### LastPipe\n\n```typescript\n// app.module.ts\nimport { LastModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ LastModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | last:3 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *last* operator.](https://rxjs.dev/api/operators/last)\n\n### MapToPipe\n\n```typescript\n// app.module.ts\nimport { MapToModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ MapToModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | mapTo:'some other string' | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *mapTo* operator.](https://rxjs.dev/api/operators/mapTo)\n\n### PairwisePipe\n\n```typescript\n// app.module.ts\nimport { PairwiseModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ PairwiseModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | pairwise | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *pairwise* operator.](https://rxjs.dev/api/operators/pairwise)\n\n### SkipPipe\n\n```typescript\n// app.module.ts\nimport { SkipModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ SkipModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | skip:3 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *skip* operator.](https://rxjs.dev/api/operators/skip)\n\n### SkipLastPipe\n\n```typescript\n// app.module.ts\nimport { SkipLastModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ SkipLastModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | skipLast:3 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *skipLast* operator.](https://rxjs.dev/api/operators/skipLast)\n\n### TakePipe\n\n```typescript\n// app.module.ts\nimport { TakeModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ TakeModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | take:3 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *take* operator.](https://rxjs.dev/api/operators/take)\n\n### TakeLastPipe\n\n```typescript\n// app.module.ts\nimport { TakeLastModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ TakeLastModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | takeLast:3 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *takeLast* operator.](https://rxjs.dev/api/operators/takeLast)\n\n### ThrottlePipe\n\n```typescript\n// app.module.ts\nimport { ThrottleModule } from 'ngx-async-pipeline';\n\n@NgModule({\n  imports: [ ThrottleModule ],\n})\nexport class AppModule {}\n\n// app.component.ts\n@Component({\n  template: `\n    {{ title$ | throttle:1000 | async }}\n  `,\n})\nexport class AppComponent {\n  title$: Observable\u003cstring\u003e = of('Hello, Async Pipeline!');\n}\n```\n\n[Official documentation for *throttle* operator.](https://rxjs.dev/api/operators/throttle)\n\n\n## How can I support the developer?\n\n- Create pull requests, submit bugs, suggest new features or documentation updates 🔧\n- Star my GitHub repos ⭐️\n- Read me on [Medium](https://medium.com/@nik.poltoratsky)\n- Follow me on [Twitter](https://twitter.com/nikpoltoratsky) 🐾\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftibing%2Fasync-pipeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftibing%2Fasync-pipeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftibing%2Fasync-pipeline/lists"}