Implementing Reactive Programming with Observables in Angular

{
  "title": "Implementing Reactive Programming with Observables in Angular",
  "description": "Gain insights into how to use observables for managing asynchronous data and events within your Angular applications.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "name": "Use Async Pipe for Subscriptions",
      "description": "Utilize Angular's async pipe in templates to automatically subscribe to and unsubscribe from observables, reducing the risk of memory leaks and simplifying code.",
      "examples": [
        {
          "before": "<p>{{ data }}</p>\n\nngOnInit() {\n  this.dataSubscription = this.dataService.getData().subscribe(data => {\n    this.data = data;\n  });\n}\n\nngOnDestroy() {\n  if (this.dataSubscription) {\n    this.dataSubscription.unsubscribe();\n  }\n}",
          "after": "<p>{{ data$ | async }}</p>\n\ndata$ = this.dataService.getData();"
        }
      ],
      "references": [
        {
          "title": "Subscribe in Template Using async Pipe",
          "url": "https://github.com/avivharuzi/angular-best-practices#subscribe-in-template-using-async-pipe"
        }
      ]
    },
    {
      "name": "Avoid Nested Subscriptions",
      "description": "Prevent nesting subscriptions within other subscriptions to maintain code readability and avoid potential memory leaks. Use higher-order mapping operators like switchMap, mergeMap, or concatMap instead.",
      "examples": [
        {
          "before": "this.firstObservable$.subscribe(firstValue => {\n  this.secondObservable$.subscribe(secondValue => {\n    // Process values\n  });\n});",
          "after": "this.firstObservable$.pipe(\n  switchMap(firstValue => this.secondObservable$)\n).subscribe(secondValue => {\n  // Process values\n});"
        }
      ],
      "references": [
        {
          "title": "Avoid Having Subscriptions Inside Subscriptions",
          "url": "https://github.com/avivharuzi/angular-best-practices#avoid-having-subscriptions-inside-subscriptions"
        }
      ]
    },
    {
      "name": "Manage Subscriptions with takeUntil",
      "description": "Use the takeUntil operator with a Subject to manage the lifecycle of subscriptions, ensuring they are properly unsubscribed when the component is destroyed.",
      "examples": [
        {
          "before": "ngOnInit() {\n  this.dataService.getData().subscribe(data => {\n    // Handle data\n  });\n}\n\nngOnDestroy() {\n  // Manual unsubscription required\n}",
          "after": "private destroy$ = new Subject<void>();\n\nngOnInit() {\n  this.dataService.getData().pipe(\n    takeUntil(this.destroy$)\n  ).subscribe(data => {\n    // Handle data\n  });\n}\n\nngOnDestroy() {\n  this.destroy$.next();\n  this.destroy$.complete();\n}"
        }
      ],
      "references": [
        {
          "title": "Use TakeUntil with Subject for Manual Unsubscription",
          "url": "https://medium.com/@marcomatto/angular-best-practices-83a7f1d7087c#20-use-takeuntil-with-subject-for-manual-unsubscription"
        }
      ]
    },
    {
      "name": "Leverage Higher-Order Mapping Operators",
      "description": "Utilize higher-order mapping operators like switchMap, mergeMap, or concatMap to handle multiple observables and manage concurrency effectively.",
      "examples": [
        {
          "before": "this.firstObservable$.subscribe(firstValue => {\n  this.secondObservable$.subscribe(secondValue => {\n    // Process values\n  });\n});",
          "after": "this.firstObservable$.pipe(\n  switchMap(firstValue => this.secondObservable$)\n).subscribe(secondValue => {\n  // Process values\n});"
        }
      ],
      "references": [
        {
          "title": "Leverage Higher-Order Mapping Operators",
          "url": "https://medium.com/@marcomatto/angular-best-practices-83a7f1d7087c#19-leverage-higher-order-mapping-operators"
        }
      ]
    },
    {
      "name": "Use combineLatest for Dependent Observables",
      "description": "When working with multiple observables that depend on each other, use combineLatest to emit the latest values whenever one of them changes.",
      "examples": [
        {
          "before": "this.firstObservable$.subscribe(firstValue => {\n  this.secondObservable$.subscribe(secondValue => {\n    // Process combined values\n  });\n});",
          "after": "combineLatest([this.firstObservable$, this.secondObservable$]).subscribe(([firstValue, secondValue]) => {\n  // Process combined values\n});"
        }
      ],
      "references": [
        {
          "title": "Use combineLatest() for Dependent Observables",
          "url": "https://medium.com/@benjamin.canape/best-practices-when-using-rxjs-in-angular-e1e3e210b304#4-use-combinelatest-for-dependent-observables"
        }
      ]
    }
  ]
}