{"id":18850566,"url":"https://github.com/manthanank/learn-rxjs","last_synced_at":"2025-09-02T10:42:20.960Z","repository":{"id":152255452,"uuid":"625626854","full_name":"manthanank/learn-rxjs","owner":"manthanank","description":"Complete Guide to Learn RxJS.","archived":false,"fork":false,"pushed_at":"2024-10-03T11:48:08.000Z","size":116,"stargazers_count":7,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T03:33:50.281Z","etag":null,"topics":["learn-rxjs","learning-rxjs","rxjs","rxjs-examples"],"latest_commit_sha":null,"homepage":"","language":"Dockerfile","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/manthanank.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-09T17:37:24.000Z","updated_at":"2024-11-19T11:46:38.000Z","dependencies_parsed_at":"2024-06-16T08:49:25.821Z","dependency_job_id":null,"html_url":"https://github.com/manthanank/learn-rxjs","commit_stats":null,"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-rxjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-rxjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-rxjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manthanank%2Flearn-rxjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manthanank","download_url":"https://codeload.github.com/manthanank/learn-rxjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239786320,"owners_count":19696790,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["learn-rxjs","learning-rxjs","rxjs","rxjs-examples"],"created_at":"2024-11-08T03:29:55.082Z","updated_at":"2025-02-20T06:21:10.886Z","avatar_url":"https://github.com/manthanank.png","language":"Dockerfile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learn Rxjs\n\nThis repository contains the code examples for the RxJS library. RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.\n\n[![NPM Package](https://github.com/manthanank/learn-rxjs/actions/workflows/publish.yml/badge.svg)](https://github.com/manthanank/learn-rxjs/actions/workflows/publish.yml)\n[![Releases](https://github.com/manthanank/learn-rxjs/actions/workflows/releases.yml/badge.svg)](https://github.com/manthanank/learn-rxjs/actions/workflows/releases.yml)\n![npm](https://img.shields.io/npm/dw/learn-rxjs)\n![npm](https://img.shields.io/npm/dm/learn-rxjs)\n![npm](https://img.shields.io/npm/dy/learn-rxjs)\n![npm](https://img.shields.io/npm/dt/learn-rxjs)\n\n## Contents\n\n- [Introduction](#rxjs-reactive-extensions-library-for-javascript)\n- [Installation](#installation)\n- [Importing](#importing)\n- [Observables](#observables)\n- [Observer](#observer)\n- [Operators](#operators)\n  - [Categories of operators](#categories-of-operators)\n    - [Creation Operators](#creation-operators)\n    - [Join Creation Operators](#join-creation-operators)\n    - [Transformation Operators](#transformation-operators)\n    - [Filtering Operators](#filtering-operators)\n    - [Join Operators](#join-operators)\n    - [Multicasting Operators](#multicasting-operators)\n    - [Error Handling Operators](#error-handling-operators)\n    - [Utility Operators](#utility-operators)\n    - [Conditional and Boolean Operators](#conditional-and-boolean-operators)\n    - [Mathematical and Aggregate Operators](#mathematical-and-aggregate-operators)\n- [Subscription](#subscription)\n- [Subject](#subject)\n- [Scheduler](#scheduler)\n\n## RxJS (Reactive Extensions Library for JavaScript)\n\nRxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code.\n\n## Installation\n\n```bash\nnpm install rxjs\n```\n\n## Importing\n\n```typescript\n'rxjs' - for example: import { of } from 'rxjs';\n\n'rxjs/operators' - for example: import { map } from 'rxjs/operators';\n\n'rxjs/ajax' - for example: import { ajax } from 'rxjs/ajax';\n\n'rxjs/fetch' - for example: import { fromFetch } from 'rxjs/fetch';\n\n'rxjs/webSocket' - for example: import { webSocket } from 'rxjs/webSocket';\n\n'rxjs/testing' - for example: import { TestScheduler } from 'rxjs/testing';\n```\n\n## Observables\n\nObservables are declarative which provide support for passing messages between publishers and subscribers.\n\n```typescript\n// pipe\n\n// subscribe\n```\n\n```typescript\nimport { Observable } from 'rxjs';\n\nconst observable = new Observable((subscriber) =\u003e {\n  subscriber.next(1);\n  subscriber.next(2);\n  subscriber.next(3);\n  setTimeout(() =\u003e {\n    subscriber.next(4);\n    subscriber.complete();\n  }, 1000);\n});\n```\n\n```typescript\nimport { Observable } from 'rxjs';\n\nconst observable = new Observable((subscriber) =\u003e {\n  subscriber.next(1);\n  subscriber.next(2);\n  subscriber.next(3);\n  setTimeout(() =\u003e {\n    subscriber.next(4);\n    subscriber.complete();\n  }, 1000);\n});\n\nconsole.log('just before subscribe');\nobservable.subscribe({\n  next(x) {\n    console.log('got value ' + x);\n  },\n  error(err) {\n    console.error('something wrong occurred: ' + err);\n  },\n  complete() {\n    console.log('done');\n  },\n});\nconsole.log('just after subscribe');\n```\n\n## Observer\n\nAn Observer is a consumer of values delivered by an Observable. Observers are simply a set of callbacks, one for each type of notification delivered by the Observable: next, error, and complete.\n\n```typescript\n// next\n\n// error\n\n// complete\n```\n\n```typescript\nconst observer = {\n  next: x =\u003e console.log('Observer got a next value: ' + x),\n  error: err =\u003e console.error('Observer got an error: ' + err),\n  complete: () =\u003e console.log('Observer got a complete notification'),\n};\n```\n\n```typescript\nobservable.subscribe(observer);\n```\n\n## Operators\n\nOperators are functions. There are two kinds of operators:\n\n**Pipeable Operators** are the kind that can be piped to Observables using the syntax `observableInstance.pipe(operator())`.\n\n**Creation Operators** are the other kind of operator, which can be called as standalone functions to create a new Observable.\n\n## Categories of operators\n\n### Creation Operators\n\nTheses operators are used to create an observable. Some of the creation operators are:\n\n- ajax\n- bindCallback\n- bindNodeCallback\n- defer\n- empty\n- from\n- fromEvent\n- fromEventPattern\n- generate\n- interval\n- of\n- range\n- throwError\n- timer\n- iif\n\n**ajax** - It creates an observable for an Ajax request with either a request object with url, headers, etc or a string for a URL.\n\nExample with Angular:\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { ajax } from 'rxjs/ajax';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eajax Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const githubUsers = ajax('https://api.github.com/users?per_page=2');\n    githubUsers.subscribe((res) =\u003e console.log(res.status, res.response));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Angular Example Link](https://stackblitz.com/edit/angular-ees5qn?file=src%2Fmain.ts)\n\nExample with TypeScript:\n\n```typescript\nimport { ajax } from 'rxjs/ajax';\n\nconst githubUsers = ajax('https://api.github.com/users?per_page=2');\ngithubUsers.subscribe((res) =\u003e console.log(res.status, res.response));\n```\n\n[Stackblitz TypeScript Example Link](https://stackblitz.com/edit/rxjs-umrlkx?file=index.ts)\n\n**bindCallback** - `bindCallback` operator is used to convert a callback-style function into an observable.\n\nIt allows you to work with asynchronous APIs that follow the Node.js-style callback pattern, where the last argument of a function is a callback function that is invoked with the result or error.\n\n**bindNodeCallback** - `bindNodeCallback` is a function that converts a Node.js-style callback function into an Observable.\n\nExample with Angular:\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { bindNodeCallback  } from 'rxjs/ajax';\n\n// Assume we have a Node.js-style callback function for file reading\nfunction readFileAsync(filePath: string, callback: (error: Error | null, data: string) =\u003e void) {\n  // Some asynchronous file reading logic\n  // Call the callback with the error (if any) and the file data\n  setTimeout(() =\u003e {\n    if (filePath === '/path/to/file.txt') {\n      callback(null, 'File content goes here');\n    } else {\n      callback(new Error('File not found'), null);\n    }\n  }, 2000);\n}\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ebindNodeCallback Example\u003c/h1\u003e\n    \u003cdiv\u003e{{ fileContent }}\u003c/div\u003e\n  `,\n})\nexport class App implements OnInit {\n  \n  fileContent: string;\n\n  ngOnInit() {\n    const readFile = bindNodeCallback(readFileAsync);\n    const filePath = '/path/to/file.txt';\n\n    const readFile$ = readFile(filePath);\n\n    readFile$.subscribe(\n      (data: string) =\u003e {\n        this.fileContent = data;\n        console.log('File content:', data);\n      },\n      (error: Error) =\u003e {\n        console.error('Error reading file:', error);\n      }\n    );\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Angular Example Link](https://stackblitz.com/edit/stackblitz-starters-avcder?file=src%2Fmain.ts)\n\n**defer** - Creates an Observable that, on subscribe, calls an Observable factory to make an Observable for each new Observer.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { switchMap, defer, of, timer, merge } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\u003ch1\u003edefer operator\u003c/h1\u003e`,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const s1 = of(new Date()); //will capture current date time\n    const s2 = defer(() =\u003e of(new Date())); //will capture date time at the moment of subscription\n\n    console.log(new Date());\n\n    timer(2000)\n      .pipe(switchMap(_ =\u003e merge(s1, s2)))\n      .subscribe(console.log);\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**empty** - Replaced with the EMPTY constant or scheduled (e.g. scheduled([], scheduler)). Will be removed in v8.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { empty } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n  \u003ch1\u003eempty operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const subscribe = empty().subscribe({\n      next: () =\u003e console.log('Next'),\n      complete: () =\u003e console.log('Complete!')\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**from** - Creates an Observable from an Array, an array-like object, a Promise, an iterable object, or an Observable-like object.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n  \u003ch1\u003efrom operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  data: any;\n\n  ngOnInit() {\n    const obj = from(['a', 'b', 'c', 'd']);\n\n    obj.subscribe((res) =\u003e {\n      console.log(res);\n      this.data = res;\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/angular-psyjew?file=src/main.ts)\n\n**fromEvent** - Creates an Observable that emits events of a specific type coming from the given event target.\n\nExample:\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003efromEvent Example\u003c/h1\u003e\n    \u003cbutton #add\u003eAdd\u003c/button\u003e\n    {{countVal}}\n    \u003ctable\u003e\n      \u003ctr *ngFor=\"let value of values\"\u003e\n        \u003ctd\u003e{{value}}\u003c/td\u003e\n      \u003c/tr\u003e\n    \u003c/table\u003e\n  `,\n})\nexport class App implements AfterViewInit {\n  data: any;\n  count = 0;\n  values = [];\n  countVal: any;\n\n  @ViewChild('add') add: ElementRef;\n\n  ngAfterViewInit() {\n    let count = 0;\n    fromEvent(this.add.nativeElement, 'click').subscribe((data) =\u003e {\n      console.log(count++);\n      this.countVal = count++;\n      console.log(this.countVal);\n      this.count++;\n      this.values.push(this.count);\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/angular-qy1hve?file=src/main.ts)\n\n**fromEventPattern** - Creates an Observable from an arbitrary API for registering event handlers.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEventPattern, Subject } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003cbutton (click)=\"startListening()\"\u003eStart Listening\u003c/button\u003e\n    \u003cbutton (click)=\"stopListening()\"\u003eStop Listening\u003c/button\u003e\n  `,\n})\nexport class App implements AfterViewInit {\n  private eventListener: EventListenerOrEventListenerObject;\n  private eventSubject: Subject\u003cEvent\u003e;\n\n  ngOnInit() {\n    this.eventSubject = new Subject\u003cEvent\u003e();\n    this.eventListener = (event: Event) =\u003e this.eventSubject.next(event);\n  }\n\n  ngOnDestroy() {\n    this.eventSubject.complete();\n  }\n\n  startListening() {\n    const observable = fromEventPattern(\n      // Function to add the event listener\n      (handler: EventListenerOrEventListenerObject) =\u003e {\n        document.addEventListener('customEvent', handler);\n      },\n      // Function to remove the event listener\n      (handler: EventListenerOrEventListenerObject) =\u003e {\n        document.removeEventListener('customEvent', handler);\n      }\n    );\n\n    observable.subscribe((event: Event) =\u003e {\n      console.log('Event received:', event);\n      // Handle the event as needed\n    });\n\n    this.eventSubject.subscribe((event: Event) =\u003e {\n      document.dispatchEvent(event);\n    });\n  }\n\n  stopListening() {\n    this.eventSubject.complete();\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**generate** - Generates an observable sequence by running a state-driven loop producing the sequence's elements, using the specified scheduler to send out observer messages.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { generate } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003egenerate example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const result = generate(0, x =\u003e x \u003c 3, x =\u003e x + 1, x =\u003e x);\n\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**interval** - Creates an Observable that emits sequential numbers every specified interval of time, on a specified SchedulerLike.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, take } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003einterval operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const numbers = interval(1000);\n    \n    const takeFourNumbers = numbers.pipe(take(4));\n    \n    takeFourNumbers.subscribe(x =\u003e console.log('Next: ', x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**of** - Converts the arguments to an observable sequence.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from, of } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n  \u003ch1\u003eof operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const obj = of('a', 'b', 'c', 'd');\n\n    obj.subscribe((res) =\u003e {\n      console.log(res);\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**range** - Creates an Observable that emits a sequence of numbers within a specified range.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { range } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n  \u003ch1\u003erange operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    //emit 1-10 in sequence\n    const source = range(1, 10);\n    //output: 1,2,3,4,5,6,7,8,9,10\n    const example = source.subscribe(val =\u003e console.log(val));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-7899ka?file=src%2Fmain.ts)\n\n**throwError** - Creates an observable that will create an error instance and push it to the consumer as an error immediately upon subscription.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { throwError } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n  \u003ch1\u003ethrowError operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    let errorCount = 0;\n    \n    const errorWithTimestamp$ = throwError(() =\u003e {\n      const error: any = new Error(`This is error number ${ ++errorCount }`);\n      error.timestamp = Date.now();\n      return error;\n    });\n    \n    errorWithTimestamp$.subscribe({\n      error: err =\u003e console.log(err.timestamp, err.message)\n    });\n    \n    errorWithTimestamp$.subscribe({\n      error: err =\u003e console.log(err.timestamp, err.message)\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-mdhkry?file=src%2Fmain.ts)\n\n**timer** - It is a creation operator used to create an observable that starts emitting the values after the timeout, and the value will keep increasing after each call.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { timer } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n  \u003ch1\u003etimer operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const source = timer(1000);\n    //output: 0\n    const subscribe = source.subscribe(val =\u003e console.log(val));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-6ylica?file=src%2Fmain.ts)\n\n**iif** - Checks a boolean at subscription time, and chooses between one of two observable sources\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { iif, of, interval } from 'rxjs';\nimport { mergeMap } from 'rxjs/operators';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n  \u003ch1\u003eiif operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const r$ = of('R');\n    const x$ = of('X');\n\n    interval(1000)\n      .pipe(mergeMap(v =\u003e iif(() =\u003e v % 4 === 0, r$, x$)))\n      .subscribe(console.log);\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-ek4ybc?file=src%2Fmain.ts)\n\n[Back to top⤴️](#contents)\n\n### Join Creation Operators\n\nThese operators are used to create an observable by combining multiple observables. Some of the join creation operators are:\n\n- combineLatest\n- concat\n- forkJoin\n- merge\n- partition\n- race\n- zip\n\n**combineLatest** - Combines multiple Observables to create an Observable whose values are calculated from the latest values of each of its input Observables.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { timer, combineLatest } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ecombineLatest operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const firstTimer = timer(0, 1000); // emit 0, 1, 2... after every second, starting from now\n    const secondTimer = timer(500, 1000); // emit 0, 1, 2... after every second, starting 0,5s from now\n    const combinedTimers = combineLatest([firstTimer, secondTimer]);\n    combinedTimers.subscribe(value =\u003e console.log(value));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz RxJS Example Link](https://stackblitz.com/edit/rxjs-zhrajm?file=index.ts)\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-dknwwt?file=src%2Fmain.ts)\n\n**concat** - Creates an output Observable which sequentially emits all values from the first given Observable and then moves on to the next.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, take, range, concat } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ecombineLatest operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const timer = interval(1000).pipe(take(4));\n    const sequence = range(1, 10);\n    const result = concat(timer, sequence);\n    result.subscribe((x) =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz RxJS Example Link](https://stackblitz.com/edit/rxjs-dvj3th?file=index.ts)\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-yshqh7?file=src%2Fmain.ts)\n\n**forkJoin** - Accepts an Array of ObservableInput or a dictionary Object of ObservableInput and returns an Observable that emits either an array of values in the exact same order as the passed array, or a dictionary of values in the same shape as the passed dictionary.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { forkJoin, of, timer } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eforkJoin operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const observable = forkJoin({\n      foo: of(1, 2, 3, 4),\n      bar: Promise.resolve(8),\n      baz: timer(4000),\n    });\n    observable.subscribe({\n      next: (value) =\u003e console.log(value),\n      complete: () =\u003e console.log('This is how it ends!'),\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz RxJS Example Link](https://stackblitz.com/edit/rxjs-gehtea?file=index.html)\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-7lvb9w?file=src%2Fmain.ts)\n\n**merge** - Creates an output Observable which concurrently emits all values from every given input Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { merge, fromEvent, interval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003emerge operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const timer = interval(1000);\n    const clicksOrTimer = merge(clicks, timer);\n    clicksOrTimer.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz RxJS Example Link](https://stackblitz.com/edit/rxjs-e4uy3s?file=index.html)\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-x8njvg?file=src%2Fmain.ts)\n\n**partition** - Splits the source Observable into two, one with values that satisfy a predicate, and another with values that don't satisfy the predicate.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, partition } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003epartition operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const observableValues = of(1, 2, 3, 4, 5, 6);\n    const [evens$, odds$] = partition(observableValues, value =\u003e value % 2 === 0);\n    \n    odds$.subscribe(x =\u003e console.log('odds', x));\n    evens$.subscribe(x =\u003e console.log('evens', x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz RxJS Example Link](https://stackblitz.com/edit/rxjs-u9s5gf?file=index.html)\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-tmvrze?file=src%2Fmain.ts)\n\n**race** - Returns an observable that mirrors the first source observable to emit an item.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, map, race } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003erace operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const obs1 = interval(7000).pipe(map(() =\u003e 'slow one'));\n    const obs2 = interval(3000).pipe(map(() =\u003e 'fast one'));\n    const obs3 = interval(5000).pipe(map(() =\u003e 'medium one'));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**zip** - Combines multiple Observables to create an Observable whose values are calculated from the values, in order, of each of its input Observables.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, zip, map } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ezip operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const age$ = of(27, 25, 29);\n    const name$ = of('Foo', 'Bar', 'Beer');\n    const isDev$ = of(true, true, false);\n    \n    zip(age$, name$, isDev$).pipe(\n      map(([age, name, isDev]) =\u003e ({ age, name, isDev }))\n    )\n    .subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Back to top⤴️](#contents)\n\n### Transformation Operators\n\nThese operators are used to transform the values emitted by an observable. Some of the transformation operators are:\n\n- buffer\n- bufferCount\n- bufferTime\n- bufferToggle\n- bufferWhen\n- concatMap\n- concatMapTo\n- exhaust\n- exhaustMap\n- expand\n- groupBy\n- map\n- mapTo\n- mergeMap\n- mergeMapTo\n- mergeScan\n- pairwise\n- partition\n- pluck\n- scan\n- switchScan\n- switchMap\n- switchMapTo\n- window\n- windowCount\n- windowTime\n- windowToggle\n- windowWhen\n\n**buffer** - Buffers the source Observable values until closingNotifier emits.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, interval, buffer } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ebuffer operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const intervalEvents = interval(1000);\n    const buffered = intervalEvents.pipe(buffer(clicks));\n    buffered.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**bufferCount** - Buffers the source Observable values until the size hits the maximum bufferSize given.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, bufferCount } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ebufferCount operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const buffered = clicks.pipe(bufferCount(2));\n    buffered.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**bufferTime** - Buffers the source Observable values for a specific time period.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, bufferTime } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ebufferTime operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const buffered = clicks.pipe(bufferTime(1000));\n    buffered.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**bufferToggle** - Buffers the source Observable values starting from an emission from openings and ending when the output of closingSelector emits.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, interval, bufferToggle, EMPTY } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ebufferToggle operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const openings = interval(1000);\n    const buffered = clicks.pipe(bufferToggle(openings, i =\u003e\n      i % 2 ? interval(500) : EMPTY\n    ));\n    buffered.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**bufferWhen** - Buffers the source Observable values, using a factory function of closing Observables to determine when to close, emit, and reset the buffer.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, bufferWhen, interval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ebufferWhen operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const buffered = clicks.pipe(\n      bufferWhen(() =\u003e interval(1000 + Math.random() * 4000))\n    );\n    buffered.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**concatMap** - Projects each source value to an Observable which is merged in the output Observable, in a serialized fashion waiting for each one to complete before merging the next.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, concatMap, interval, take } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003econcatMap operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      concatMap(ev =\u003e interval(1000).pipe(take(4)))\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**concatMapTo** - Projects each source value to the same Observable which is merged multiple times in a serialized fashion on the output Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, concatMapTo, interval, take } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003econcatMapTo operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      concatMapTo(interval(1000).pipe(take(4)))\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**exhaust** - Renamed to exhaustAll.\n\n**exhaustMap** - Projects each source value to an Observable which is merged in the output Observable only if the previous projected Observable has completed.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, exhaustMap, interval, take } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eexhaustMap operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      exhaustMap(() =\u003e interval(1000).pipe(take(5)))\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**expand** - Recursively projects each source value to an Observable which is merged in the output Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, expand, of, delay, take } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eexpand operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const powersOfTwo = clicks.pipe(\n      map(() =\u003e 1),\n      expand(x =\u003e of(2 * x).pipe(delay(1000))),\n      take(10)\n    );\n    powersOfTwo.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**groupBy** - Groups the elements of an observable sequence according to a specified key selector function.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, groupBy, mergeMap, reduce } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003egroupBy operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    of(\n      { id: 1, name: 'JavaScript' },\n      { id: 2, name: 'Parcel' },\n      { id: 2, name: 'webpack' },\n      { id: 1, name: 'TypeScript' },\n      { id: 3, name: 'TSLint' }\n    ).pipe(\n      groupBy(p =\u003e p.id),\n      mergeMap(group$ =\u003e group$.pipe(reduce((acc, cur) =\u003e [...acc, cur], [])))\n    )\n    .subscribe(p =\u003e console.log(p));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**map** - Applies a given project function to each value emitted by the source Observable, and emits the resulting values as an Observable.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from, map } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003emap operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const data = from([\n      {\n        id: 1,\n      },\n      {\n        id: 2,\n      },\n      {\n        id: 3,\n      },\n      {\n        id: 4,\n      },\n      {\n        id: 5,\n      },\n    ]);\n\n    data.pipe(map((data) =\u003e data.id)).subscribe((res) =\u003e console.log(res));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**mapTo** - Emits the given constant value on the output Observable every time the source Observable emits a value.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, mapTo } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003emapTo operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const greetings = clicks.pipe(mapTo('Hi'));\n\n    greetings.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**mergeMap** - Projects each source value to an Observable which is merged in the output Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, mergeMap, interval, map } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003emergeMap operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const letters = of('a', 'b', 'c');\n    const result = letters.pipe(\n      mergeMap(x =\u003e interval(1000).pipe(map(i =\u003e x + i)))\n    );\n    \n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**mergeMapTo** - Projects each source value to the same Observable which is merged multiple times in the output Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, mergeMapTo, interval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003emergeMapTo operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(mergeMapTo(interval(1000)));\n\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**mergeScan** - Applies an accumulator function over the source Observable where the accumulator function itself returns an Observable, then each intermediate Observable returned is merged into the output Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, mergeScan, of } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003emergeScan operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const click$ = fromEvent(document, 'click');\n    const one$ = click$.pipe(map(() =\u003e 1));\n    const seed = 0;\n    const count$ = one$.pipe(\n      mergeScan((acc, one) =\u003e of(acc + one), seed)\n    );\n    \n    count$.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**pairwise** - Groups pairs of consecutive emissions together and emits them as an array of two values.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, pairwise, map } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003epairwise operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent\u003cPointerEvent\u003e(document, 'click');\n    const pairs = clicks.pipe(pairwise());\n    const distance = pairs.pipe(\n      map(([first, second]) =\u003e {\n        const x0 = first.clientX;\n        const y0 = first.clientY;\n        const x1 = second.clientX;\n        const y1 = second.clientY;\n        return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));\n      })\n    );\n    \n    distance.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**partition** - Splits the source Observable into two, one with values that satisfy a predicate, and another with values that don't satisfy the predicate.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, partition } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003epartition operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const observableValues = of(1, 2, 3, 4, 5, 6);\n    const [evens$, odds$] = partition(observableValues, value =\u003e value % 2 === 0);\n    \n    odds$.subscribe(x =\u003e console.log('odds', x));\n    evens$.subscribe(x =\u003e console.log('evens', x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**pluck** - Maps each source value to its specified nested property.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from, pluck, toArray } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ePluck Example\u003c/h1\u003e\n    \u003cdiv class=\"row\"\u003e\n      \u003cdiv class=\"col\"\u003e\n        \u003cul *ngFor=\"let item of data1\"\u003e\n          \u003cli\u003e{{item}}\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"col\"\u003e\n        \u003cul *ngFor=\"let item of data2\"\u003e\n          \u003cli\u003e{{item}}\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n})\nexport class App implements OnInit {\n  users = [\n    {\n      name: 'abc',\n      age: '25',\n      address: {\n        state: 'DL',\n        country: 'India',\n      },\n    },\n    {\n      name: 'efg',\n      age: '25',\n      address: {\n        state: 'MH',\n        country: 'India',\n      },\n    },\n    {\n      name: 'lmn',\n      age: '25',\n      address: {\n        state: 'KA',\n        country: 'India',\n      },\n    },\n    {\n      name: 'pqr',\n      age: '25',\n      address: {\n        state: 'KL',\n        country: 'India',\n      },\n    },\n    {\n      name: 'xyz',\n      age: '25',\n      address: {\n        state: 'GA',\n        country: 'India',\n      },\n    },\n  ];\n  data1: any;\n  data2: any;\n  constructor() {}\n\n  ngOnInit() {\n    from(this.users)\n      .pipe(pluck('name'), toArray())\n      .subscribe((res) =\u003e {\n        console.log(res);\n        this.data1 = res;\n      });\n    from(this.users)\n      .pipe(pluck('address', 'state'), toArray())\n      .subscribe((res) =\u003e {\n        console.log(res);\n        this.data2 = res;\n      });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**scan** - Useful for encapsulating and managing state. Applies an accumulator (or \"reducer function\") to each value from the source after an initial state is established -- either via a seed value (second argument), or from the first value from the source.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, scan, map } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003escan operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const numbers$ = of(1, 2, 3);\n    \n    numbers$\n      .pipe(\n        // Get the sum of the numbers coming in.\n        scan((total, n) =\u003e total + n),\n        // Get the average by dividing the sum by the total number\n        // received so far (which is 1 more than the zero-based index).\n        map((sum, index) =\u003e sum / (index + 1))\n      )\n      .subscribe(console.log);\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-yk2lwk?file=src%2Fmain.ts)\n\n**switchScan** - Applies an accumulator function over the source Observable where the accumulator function itself returns an Observable, emitting values only from the most recently returned Observable.\n\n**switchMap** - Projects each source value to an Observable which is merged in the output Observable, emitting values only from the most recently projected Observable.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from, of, switchMap } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eswitchMap operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const data = from(['abc', 'xyz', 'efg', 'pqr', 'lmn']);\n\n    data\n      .pipe(switchMap((data) =\u003e this.getData(data)))\n      .subscribe((res) =\u003e console.log(res));\n  }\n\n  getData(data) {\n    return of('name is' + data);\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**switchMapTo** - Projects each source value to the same Observable which is flattened multiple times with switchMap in the output Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, switchMapTo, interval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eswitchMapTo operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(switchMapTo(interval(1000)));\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-wbj1xt?file=src%2Fmain.ts)\n\n**window** - Branch out the source Observable values as a nested Observable whenever windowBoundaries emits.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, interval, window, map, take, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindow operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const sec = interval(1000);\n    const result = clicks.pipe(\n      window(sec),\n      map(win =\u003e win.pipe(take(2))), // take at most 2 emissions from each window\n      mergeAll()                     // flatten the Observable-of-Observables\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-q7tjwj?file=src%2Fmain.ts)\n\n**windowCount** - Branch out the source Observable values as a nested Observable with each nested Observable emitting at most windowSize values.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, windowCount, map, skip, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindowCount operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      windowCount(3),\n      map(win =\u003e win.pipe(skip(1))), // skip first of every 3 clicks\n      mergeAll()                     // flatten the Observable-of-Observables\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example 1 Link](https://stackblitz.com/edit/stackblitz-starters-xpy6gh?file=src%2Fmain.ts)\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, windowCount, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindowCount operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      windowCount(2, 3),\n      mergeAll() // flatten the Observable-of-Observables\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example 2 Link](https://stackblitz.com/edit/stackblitz-starters-q7tjwj?file=src%2Fmain.ts)\n\n**windowTime** - Branch out the source Observable values as a nested Observable periodically in time.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, windowTime, map, take, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindowTime operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      windowTime(1000),\n      map(win =\u003e win.pipe(take(2))), // take at most 2 emissions from each window\n      mergeAll()                     // flatten the Observable-of-Observables\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example 1 Link](https://stackblitz.com/edit/stackblitz-starters-uvwhnp?file=src%2Fmain.ts)\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, windowTime, map, take, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindowTime operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      windowTime(1000, 5000),\n      map(win =\u003e win.pipe(take(2))), // take at most 2 emissions from each window\n      mergeAll()                     // flatten the Observable-of-Observables\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example 2 Link](https://stackblitz.com/edit/stackblitz-starters-mcsaht?file=src%2Fmain.ts)\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, windowTime, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindowTime operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      windowTime(1000, 5000, 2), // take at most 2 emissions from each window\n      mergeAll()                 // flatten the Observable-of-Observables\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example 3 Link](https://stackblitz.com/edit/stackblitz-starters-x1qyak?file=src%2Fmain.ts)\n\n**windowToggle** - Branch out the source Observable values as a nested Observable starting from an emission from openings and ending when the output of closingSelector emits.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, interval, windowToggle, EMPTY, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindowToggle operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const openings = interval(1000);\n    const result = clicks.pipe(\n      windowToggle(openings, i =\u003e i % 2 ? interval(500) : EMPTY),\n      mergeAll()\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-qdmr61?file=src%2Fmain.ts)\n\n**windowWhen** - Branch out the source Observable values as a nested Observable using a factory function of closing Observables to determine when to start a new window.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, windowWhen, interval, map, take, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewindowWhen operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      windowWhen(() =\u003e interval(1000 + Math.random() * 4000)),\n      map(win =\u003e win.pipe(take(2))), // take at most 2 emissions from each window\n      mergeAll()                     // flatten the Observable-of-Observables\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example 1 Link](https://stackblitz.com/edit/stackblitz-starters-vjykyp?file=src%2Fmain.ts)\n\n[Back to top⤴️](#contents)\n\n### Filtering Operators\n\nThese operators allow you to filter the values emitted by Observables. Some of the most commonly used filtering operators are:\n\n- audit\n- auditTime\n- debounce\n- debounceTime\n- distinct\n- distinctUntilChanged\n- distinctUntilKeyChanged\n- elementAt\n- filter\n- first\n- ignoreElements\n- last\n- sample\n- sampleTime\n- single\n- skip\n- skipLast\n- skipUntil\n- skipWhile\n- take\n- takeLast\n- takeUntil\n- takeWhile\n- throttle\n- throttleTime\n\n**audit** - Ignores source values for a duration determined by another Observable, then emits the most recent value from the source Observable, then repeats this process.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, audit, interval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eaudit operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(audit(ev =\u003e interval(1000)));\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-xskoee?file=src%2Fmain.ts)\n\n**auditTime** - Ignores source values for duration milliseconds, then emits the most recent value from the source Observable, then repeats this process.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, auditTime } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eauditTime operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(auditTime(1000));\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-dcpyww?file=src%2Fmain.ts)\n\n**debounce** - Emits a notification from the source Observable only after a particular time span determined by another Observable has passed without another source emission.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, scan, debounce, interval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edebounce operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(\n      scan(i =\u003e ++i, 1),\n      debounce(i =\u003e interval(200 * i))\n    );\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-o6khgs?file=src%2Fmain.ts)\n\n**debounceTime** - Emits a notification from the source Observable only after a particular time span has passed without another source emission.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, debounceTime } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edebounceTime Example\u003c/h1\u003e\n    \u003cinput type=\"text\" #myInput /\u003e\n    \u003cp *ngIf=\"requestedData != null\"\u003eData: {{requestedData}}\u003c/p\u003e\n  `,\n})\nexport class App implements OnInit, AfterViewInit {\n  requestedData = null;\n  @ViewChild('myInput') myInput: ElementRef;\n  constructor() {}\n\n  ngOnInit() {}\n\n  ngAfterViewInit() {\n    const searchItem = fromEvent\u003cany\u003e(this.myInput.nativeElement, 'keyup').pipe(\n      map((event) =\u003e {\n        event.target.value;\n      }),\n      debounceTime(1000)\n    );\n    searchItem.subscribe((res) =\u003e {\n      console.log(res);\n      this.requestedData = res;\n\n      setTimeout(() =\u003e {\n        this.requestedData = null;\n      }, 2000);\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**distinct** - Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from previous items.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, distinct } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edistinct operator\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  ngOnInit() {\n    of(1, 1, 2, 2, 2, 1, 2, 3, 4, 3, 2, 1)\n      .pipe(distinct())\n      .subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-ehgdax?file=src%2Fmain.ts)\n\n**distinctUntilChanged** - Returns a result Observable that emits all values pushed by the source observable if they are distinct in comparison to the last value the result observable emitted.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport {\n  AfterViewInit,\n  Component,\n  ElementRef,\n  OnInit,\n  ViewChild,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, debounceTime, distinctUntilChanged } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edistinctUntilChanged Example\u003c/h1\u003e\n    \u003cinput type=\"text\" #myInput /\u003e\n    \u003cp *ngIf=\"requestedData != null\"\u003eData: {{requestedData}}\u003c/p\u003e\n  `,\n})\nexport class App implements OnInit, AfterViewInit {\n  requestedData = null;\n  @ViewChild('myInput') myInput: ElementRef;\n  constructor() {}\n\n  ngOnInit() {}\n\n  ngAfterViewInit() {\n    const searchItem = fromEvent\u003cany\u003e(this.myInput.nativeElement, 'keyup').pipe(\n      map((event) =\u003e {\n        event.target.value;\n      }),\n      debounceTime(500),\n      distinctUntilChanged()\n    );\n    searchItem.subscribe((res) =\u003e {\n      console.log(res);\n      this.requestedData = res;\n\n      setTimeout(() =\u003e {\n        this.requestedData = null;\n      }, 2000);\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**distinctUntilKeyChanged** - Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item, using a property accessed by using the key provided to check if the two items are distinct.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, distinctUntilKeyChanged } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edistinctUntilKeyChanged Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    of(\n      { age: 4, name: 'Foo' },\n      { age: 7, name: 'Bar' },\n      { age: 5, name: 'Foo' },\n      { age: 6, name: 'Foo' }\n    ).pipe(\n      distinctUntilKeyChanged('name')\n    )\n    .subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Stackblitz RxJS Example Link](https://stackblitz.com/edit/rxjs-754d9b?file=index.html)\n\n[Stackblitz Angular Example Link](https://stackblitz.com/edit/stackblitz-starters-jtriop?file=src%2Fmain.ts)\n\n**elementAt** - Emits the single value at the specified index in a sequence of emissions from the source Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, elementAt } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eelementAt Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(elementAt(2));\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**filter** - Filter items emitted by the source Observable by only emitting those that satisfy a specified predicate.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, filter } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003efilter Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const div = document.createElement('div');\n    div.style.cssText = 'width: 200px; height: 200px; background: #09c;';\n    document.body.appendChild(div);\n\n    const clicks = fromEvent(document, 'click');\n    const clicksOnDivs = clicks.pipe(filter(ev =\u003e (\u003cHTMLElement\u003eev.target).tagName === 'DIV'));\n    clicksOnDivs.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**first** - Emits only the first value (or the first value that meets some condition) emitted by the source Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, first } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003efirst Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(first());\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**ignoreElements** - Ignores all items emitted by the source Observable and only passes calls of complete or error.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, ignoreElements } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eignoreElements Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    of('you', 'talking', 'to', 'me')\n      .pipe(ignoreElements())\n      .subscribe({\n        next: word =\u003e console.log(word),\n        error: err =\u003e console.log('error:', err),\n        complete: () =\u003e console.log('the end'),\n      });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**last** - Returns an Observable that emits only the last item emitted by the source Observable. It optionally takes a predicate function as a parameter, in which case, rather than emitting the last item from the source Observable, the resulting Observable will emit the last item from the source Observable that satisfies the predicate.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from, last } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003elast Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source = from(['x', 'y', 'z']);\n    const result = source.pipe(last());\n\n    result.subscribe(value =\u003e console.log(`Last alphabet: ${ value }`));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**sample** - Emits the most recently emitted value from the source Observable whenever another Observable, the notifier, emits.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, interval, sample } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003esample Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const seconds = interval(1000);\n    const clicks = fromEvent(document, 'click');\n    const result = seconds.pipe(sample(clicks));\n\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**sampleTime** - Emits the most recently emitted value from the source Observable within periodic time intervals.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, sampleTime } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003esampleTime Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(sampleTime(1000));\n\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**single** - Returns an observable that asserts that only one value is emitted from the observable that matches the predicate. If no predicate is provided, then it will assert that the observable only emits one value.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, single } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003esingle Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source1 = of(\n    { name: 'Ben' },\n    { name: 'Tracy' },\n    { name: 'Laney' },\n    { name: 'Lily' }\n    );\n    \n    source1\n      .pipe(single(x =\u003e x.name.startsWith('B')))\n      .subscribe(x =\u003e console.log(x));\n    // Emits 'Ben'\n    \n    \n    const source2 = of(\n    { name: 'Ben' },\n    { name: 'Tracy' },\n    { name: 'Bradley' },\n    { name: 'Lincoln' }\n    );\n    \n    source2\n      .pipe(single(x =\u003e x.name.startsWith('B')))\n      .subscribe({ error: err =\u003e console.error(err) });\n    // Error emitted: SequenceError('Too many values match')\n    \n    \n    const source3 = of(\n    { name: 'Laney' },\n    { name: 'Tracy' },\n    { name: 'Lily' },\n    { name: 'Lincoln' }\n    );\n    \n    source3\n      .pipe(single(x =\u003e x.name.startsWith('B')))\n      .subscribe({ error: err =\u003e console.error(err) });\n    // Error emitted: NotFoundError('No values match')\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**skip** -Returns an Observable that skips the first count items emitted by the source Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, skip } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eskip Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    // emit every half second\n    const source = interval(500);\n    // skip the first 10 emitted values\n    const result = source.pipe(skip(10));\n\n    result.subscribe(value =\u003e console.log(value));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**skipLast** - Skip a specified number of values before the completion of an observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, skipLast } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eskipLast Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const numbers = of(1, 2, 3, 4, 5);\n    const skipLastTwo = numbers.pipe(skipLast(2));\n    skipLastTwo.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**skipUntil** - Returns an Observable that skips items emitted by the source Observable until a second Observable emits an item.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, fromEvent, skipUntil } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eskipUntil Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const intervalObservable = interval(1000);\n    const click = fromEvent(document, 'click');\n\n    const emitAfterClick = intervalObservable.pipe(\n      skipUntil(click)\n    );\n    // clicked at 4.6s. output: 5...6...7...8........ or\n    // clicked at 7.3s. output: 8...9...10..11.......\n    emitAfterClick.subscribe(value =\u003e console.log(value));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**skipWhile** - Returns an Observable that skips all items emitted by the source Observable as long as a specified condition holds true, but emits all further source items as soon as the condition becomes false.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from, skipWhile } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eskipWhile Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source = from(['Green Arrow', 'SuperMan', 'Flash', 'SuperGirl', 'Black Canary'])\n    // Skip the heroes until SuperGirl\n    const example = source.pipe(skipWhile(hero =\u003e hero !== 'SuperGirl'));\n    // output: SuperGirl, Black Canary\n    example.subscribe(femaleHero =\u003e console.log(femaleHero));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**take** - Emits only the first count values emitted by the source Observable.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { from, interval, take } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003etake Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  data = ['a', 'b', 'c', 'd'];\n  ngOnInit() {\n    const datas = from(this.data);\n\n    datas.pipe(take(3)).subscribe((res) =\u003e {\n      console.log(res);\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**takeLast** - Waits for the source to complete, then emits the last N values from the source, as specified by the count argument.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { range, takeLast } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003etakeLast Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const many = range(1, 100);\n    const lastThree = many.pipe(takeLast(3));\n    lastThree.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**takeUntil** - Emits the values emitted by the source Observable until a notifier Observable emits a value.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, fromEvent, takeUntil } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003etakeUntil Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source = interval(1000);\n    const clicks = fromEvent(document, 'click');\n    const result = source.pipe(takeUntil(clicks));\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**takeWhile** - Emits values emitted by the source Observable so long as each value satisfies the given predicate, and then completes as soon as this predicate is not satisfied.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, takeWhile } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003etakeWhile Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent\u003cPointerEvent\u003e(document, 'click');\n    const result = clicks.pipe(takeWhile(ev =\u003e ev.clientX \u003e 200));\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**throttle** - Emits a value from the source Observable, then ignores subsequent source values for a duration determined by another Observable, then repeats this process.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, throttle, interval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ethrottle Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(throttle(() =\u003e interval(1000)));\n\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**throttleTime** - Emits a value from the source Observable, then ignores subsequent source values for duration milliseconds, then repeats this process.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, throttleTime } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ethrottleTime Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const result = clicks.pipe(throttleTime(1000));\n\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Back to top⤴️](#contents)\n\n### Join Operators\n\nThe join operators are used to combine the emissions of multiple Observables. Some of the join operators are:\n\n- combineLatestAll\n- concatAll\n- exhaustAll\n- mergeAll\n- switchAll\n- startWith\n- withLatestFrom\n\n**combineLatestAll** - Flattens an Observable-of-Observables by applying combineLatest when the Observable-of-Observables completes.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, interval, take, combineLatestAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ecombineLatestAll Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const higherOrder = clicks.pipe(\n      map(() =\u003e interval(Math.random() * 2000).pipe(take(3))),\n      take(2)\n    );\n    const result = higherOrder.pipe(combineLatestAll());\n\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**concatAll** - Converts a higher-order Observable into a first-order Observable by concatenating the inner Observables in order.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, interval, take, concatAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003econcatAll Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const higherOrder = clicks.pipe(\n      map(() =\u003e interval(1000).pipe(take(4)))\n    );\n    const firstOrder = higherOrder.pipe(concatAll());\n    firstOrder.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**exhaustAll** - Converts a higher-order Observable into a first-order Observable by dropping inner Observables while the previous inner Observable has not yet completed.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, interval, take, exhaustAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eexhaustAll Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const higherOrder = clicks.pipe(\n      map(() =\u003e interval(1000).pipe(take(5)))\n    );\n    const result = higherOrder.pipe(exhaustAll());\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**mergeAll** - Converts a higher-order Observable into a first-order Observable which concurrently delivers all values that are emitted on the inner Observables.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, map, interval, mergeAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003emergeAll Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const higherOrder = clicks.pipe(map(() =\u003e interval(1000)));\n    const firstOrder = higherOrder.pipe(mergeAll());\n\n    firstOrder.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**switchAll** - Converts a higher-order Observable into a first-order Observable producing values only from the most recent observable sequence\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, tap, map, interval, switchAll } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eswitchAll Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click').pipe(tap(() =\u003e console.log('click')));\n    const source = clicks.pipe(map(() =\u003e interval(1000)));\n    \n    source\n      .pipe(switchAll())\n      .subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**startWith** - Returns an observable that, at the moment of subscription, will synchronously emit all values provided to this operator, then subscribe to the source and mirror all of its emissions to subscribers.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { timer, map, startWith } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003estartWith Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    timer(1000)\n      .pipe(\n        map(() =\u003e 'timer emit'),\n        startWith('timer start')\n      )\n      .subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**withLatestFrom** - Combines the source Observable with other Observables to create an Observable whose values are calculated from the latest values of each, only when the source emits.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, interval, withLatestFrom } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ewithLatestFrom Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const higherOrder = clicks.pipe(\n      map(() =\u003e interval(1000).pipe(take(5)))\n    );\n    const result = higherOrder.pipe(exhaustAll());\n    result.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n### Multicasting Operators\n\nThese operators are used to share the observable execution among multiple subscribers. Some of the multicasting operators are:\n\n- multicast\n- publish\n- publishBehavior\n- publishLast\n- publishReplay\n- share\n\n**multicast** - Returns an Observable that emits the results of invoking a specified selector on items emitted by a ConnectableObservable that shares a single subscription to the underlying stream.\n\n[Link](https://rxjs.dev/api/operators/multicast)\n\n**publish** - Returns a ConnectableObservable, which is a variety of Observable that waits until its connect method is called before it begins emitting items to those Observers that have subscribed to it.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { zip, interval, of, map, publish, merge, tap } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003epublish Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source$ = zip(interval(2000), of(1, 2, 3, 4, 5, 6, 7, 8, 9))\n      .pipe(map(([, number]) =\u003e number));\n    \n    source$\n      .pipe(\n        publish(multicasted$ =\u003e\n          merge(\n            multicasted$.pipe(tap(x =\u003e console.log('Stream 1:', x))),\n            multicasted$.pipe(tap(x =\u003e console.log('Stream 2:', x))),\n            multicasted$.pipe(tap(x =\u003e console.log('Stream 3:', x)))\n          )\n        )\n      )\n      .subscribe();\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**publishBehavior** - Creates a ConnectableObservable that utilizes a BehaviorSubject.\n\n[Link](https://rxjs.dev/api/operators/publishBehavior)\n\n**publishLast** - Returns a connectable observable sequence that shares a single subscription to the underlying sequence containing only the last notification.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { ConnectableObservable, interval, publishLast, tap, take } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003epublishLast Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const connectable = \u003cConnectableObservable\u003cnumber\u003e\u003einterval(1000)\n      .pipe(\n        tap(x =\u003e console.log('side effect', x)),\n        take(3),\n        publishLast()\n      );\n    \n    connectable.subscribe({\n      next: x =\u003e console.log('Sub. A', x),\n      error: err =\u003e console.log('Sub. A Error', err),\n      complete: () =\u003e console.log('Sub. A Complete')\n    });\n    \n    connectable.subscribe({\n      next: x =\u003e console.log('Sub. B', x),\n      error: err =\u003e console.log('Sub. B Error', err),\n      complete: () =\u003e console.log('Sub. B Complete')\n    });\n    \n    connectable.connect();\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**publishReplay** - Returns a connectable observable sequence that shares a single subscription to the underlying sequence replaying all notifications.\n\n[Link](https://rxjs.dev/api/operators/publishReplay)\n\n**share** - Returns a new Observable that multicasts (shares) the original Observable. As long as there is at least one Subscriber this Observable will be subscribed and emitting data. When all subscribers have unsubscribed it will unsubscribe from the source Observable. Because the Observable is multicasting it makes the stream hot. This is an alias for multicast(() =\u003e new Subject()), refCount().\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, tap, map, take, share } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eshare Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source = interval(1000).pipe(\n      tap(x =\u003e console.log('Processing: ', x)),\n      map(x =\u003e x * x),\n      take(6),\n      share()\n    );\n    \n    source.subscribe(x =\u003e console.log('subscription 1: ', x));\n    source.subscribe(x =\u003e console.log('subscription 2: ', x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Back to top⤴️](#contents)\n\n### Error Handling Operators\n\nThese operators are used to handle errors that occur in the observable sequence. Some of the error handling operators are:\n\n- catchError\n- retry\n- retryWhen\n\n**catchError** - Catches errors on the observable to be handled by returning a new observable or throwing an error.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, map, catchError } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ecatchError Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    of(1, 2, 3, 4, 5)\n      .pipe(\n        map(n =\u003e {\n          if (n === 4) {\n            throw 'four!';\n          }\n          return n;\n        }),\n        catchError(err =\u003e of('I', 'II', 'III', 'IV', 'V'))\n      )\n      .subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**retry** - Returns an Observable that mirrors the source Observable with the exception of an error.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, mergeMap, throwError, of, retry } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eretry Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source = interval(1000);\n    const result = source.pipe(\n      mergeMap(val =\u003e val \u003e 5 ? throwError(() =\u003e 'Error!') : of(val)),\n      retry(2) // retry 2 times on error\n    );\n    \n    result.subscribe({\n      next: value =\u003e console.log(value),\n      error: err =\u003e console.log(`${ err }: Retried 2 times then quit!`)\n    });\n    \n    // Output:\n    // 0..1..2..3..4..5..\n    // 0..1..2..3..4..5..\n    // 0..1..2..3..4..5..\n    // 'Error!: Retried 2 times then quit!'\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**retryWhen** - Returns an Observable that mirrors the source Observable with the exception of an error. If the source Observable calls error, this method will emit the Throwable that caused the error to the ObservableInput returned from notifier. If that Observable calls complete or error then this method will call complete or error on the child subscription. Otherwise this method will resubscribe to the source Observable.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, map, retryWhen, tap, delayWhen, timer } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eretryWhen Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const source = interval(1000);\n    const result = source.pipe(\n      map(value =\u003e {\n        if (value \u003e 5) {\n          // error will be picked up by retryWhen\n          throw value;\n        }\n        return value;\n      }),\n      retryWhen(errors =\u003e\n        errors.pipe(\n          // log error message\n          tap(value =\u003e console.log(`Value ${ value } was too high!`)),\n          // restart in 5 seconds\n          delayWhen(value =\u003e timer(value * 1000))\n        )\n      )\n    );\n    \n    result.subscribe(value =\u003e console.log(value));\n    \n    // results:\n    // 0\n    // 1\n    // 2\n    // 3\n    // 4\n    // 5\n    // 'Value 6 was too high!'\n    // - Wait 5 seconds then repeat\n  }\n}\n\nbootstrapApplication(App);\n```\n\n[Back to top⤴️](#contents)\n\n### Utility Operators\n\nThese operators are used to perform utility operations on the observable sequence. Some of the utility operators are:\n\n- tap\n- delay\n- delayWhen\n- dematerialize\n- materialize\n- observeOn\n- subscribeOn\n- timeInterval\n- timestamp\n- timeout\n- timeoutWith\n- toArray\n\n**tap** - Used to perform side-effects for notifications from the source observable.\n\n```jsx\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, Subscription, tap } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003etap Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n  subscription: Subscription;\n\n  ngOnInit() {\n    let count = interval(1000);\n\n    this.subscription = count\n      .pipe(\n        tap((res) =\u003e {\n          console.log('Before tap', res);\n          if (res == 5) {\n            this.subscription.unsubscribe();\n          }\n        })\n      )\n      .subscribe((res) =\u003e {\n        console.log('After tap', res);\n      });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**delay** - Delays the emission of items from the source Observable by a given timeout or until a given Date.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, delay } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edelay Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const delayedClicks = clicks.pipe(delay(1000)); // each click emitted after 1 second\n    delayedClicks.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**delayWhen** - Delays the emission of items from the source Observable by a given time span determined by the emissions of another Observable.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, delay } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edelayWhen Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clicks = fromEvent(document, 'click');\n    const delayedClicks = clicks.pipe(\n      delayWhen(() =\u003e interval(Math.random() * 5000))\n    );\n    delayedClicks.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**dematerialize** - Converts an Observable of ObservableNotification objects into the emissions that they represent.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { NextNotification, ErrorNotification, of, dematerialize } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003edematerialize Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const notifA: NextNotification\u003cstring\u003e = { kind: 'N', value: 'A' };\n    const notifB: NextNotification\u003cstring\u003e = { kind: 'N', value: 'B' };\n    const notifE: ErrorNotification = { kind: 'E', error: new TypeError('x.toUpperCase is not a function') };\n    \n    const materialized = of(notifA, notifB, notifE);\n    \n    const upperCase = materialized.pipe(dematerialize());\n    upperCase.subscribe({\n      next: x =\u003e console.log(x),\n      error: e =\u003e console.error(e)\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**materialize** - Represents all of the notifications from the source Observable as next emissions marked with their original types within Notification objects.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, materialize, map } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003ematerialize Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const letters = of('a', 'b', 13, 'd');\n    const upperCase = letters.pipe(map((x: any) =\u003e x.toUpperCase()));\n    const materialized = upperCase.pipe(materialize());\n    \n    materialized.subscribe(x =\u003e console.log(x));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**observeOn** - Re-emits all notifications from source Observable with specified scheduler.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, observeOn, animationFrameScheduler } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003eobserveOn Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const someDiv = document.createElement('div');\n    someDiv.style.cssText = 'width: 200px;background: #09c';\n    document.body.appendChild(someDiv);\n    const intervals = interval(10);      // Intervals are scheduled\n                                        // with async scheduler by default...\n    intervals.pipe(\n      observeOn(animationFrameScheduler) // ...but we will observe on animationFrame\n    )                                    // scheduler to ensure smooth animation.\n    .subscribe(val =\u003e {\n      someDiv.style.height = val + 'px';\n    });\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**subscribeOn** - Asynchronously subscribes Observers to this Observable on the specified SchedulerLike.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { of, merge } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003esubscribeOn Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const a = of(1, 2, 3);\n    const b = of(4, 5, 6);\n    \n    merge(a, b).subscribe(console.log);\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**timeInterval** - Emits an object containing the current value, and the time that has passed between emitting the current value and the previous value, which is calculated by using the provided scheduler's now() method to retrieve the current time at each emission, then calculating the difference. The scheduler defaults to asyncScheduler, so by default, the interval will be in milliseconds.\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { interval, timeInterval } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003etimeInterval Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const seconds = interval(1000);\n    \n    seconds\n      .pipe(timeInterval())\n      .subscribe(value =\u003e console.log(value));\n  }\n}\n\nbootstrapApplication(App);\n```\n\n**timestamp** - Attaches a timestamp to each item emitted by an observable indicating when it was emitted\n\n```typescript\nimport 'zone.js/dist/zone';\nimport { Component, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { fromEvent, timestamp } from 'rxjs';\n\n@Component({\n  selector: 'my-app',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    \u003ch1\u003etimestamp Example\u003c/h1\u003e\n  `,\n})\nexport class App implements OnInit {\n\n  ngOnInit() {\n    const clickWithTimestamp = fromEvent(document, 'click').pipe(\n      timestamp()\n    );\n\n    // Emits data of type { value: PointerEvent, timestamp: number }\n    clickWithTimestamp.subscribe(data =\u003e {\n      console.log(data);\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-rxjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanthanank%2Flearn-rxjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanthanank%2Flearn-rxjs/lists"}