Optimizing Angular Application Performance with Change Detection

{
  "title": "Optimizing Angular Application Performance with Change Detection",
  "description": "Learn about Angular's change detection strategies and how to optimize performance by controlling when and how changes propagate.",
  "category": "Angular Cursor Rules",
  "rules": [
    {
      "id": "angular-onpush-change-detection",
      "description": "Use the OnPush change detection strategy to improve performance by reducing unnecessary change detection cycles.",
      "recommendation": "Set the change detection strategy to OnPush in components that rely on immutable input properties.",
      "codeExample": {
        "language": "typescript",
        "code": "import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ExampleComponent {\n  // Component logic\n}"
      },
      "references": [
        {
          "label": "Optimizing Angular Performance: Strategies & Best Practices",
          "url": "https://medium.com/@satvatiyasin/optimizing-angular-performance-strategies-best-practices-aa5d93b732d9"
        }
      ]
    },
    {
      "id": "angular-immutable-data-structures",
      "description": "Utilize immutable data structures to enhance change detection efficiency.",
      "recommendation": "Ensure that input properties are immutable to allow Angular to efficiently detect changes.",
      "codeExample": {
        "language": "typescript",
        "code": "import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ExampleComponent {\n  private _data: ReadonlyArray<string> = [];\n\n  get data(): ReadonlyArray<string> {\n    return this._data;\n  }\n\n  updateData(newData: string[]): void {\n    this._data = [...newData];\n  }\n}"
      },
      "references": [
        {
          "label": "Optimizing Angular Performance: Strategies & Best Practices",
          "url": "https://medium.com/@satvatiyasin/optimizing-angular-performance-strategies-best-practices-aa5d93b732d9"
        }
      ]
    },
    {
      "id": "angular-trackby-function",
      "description": "Implement trackBy functions in ngFor directives to optimize rendering performance.",
      "recommendation": "Use trackBy to provide a unique identifier for each item in a list to prevent unnecessary DOM manipulations.",
      "codeExample": {
        "language": "typescript",
        "code": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <ul>\n      <li *ngFor=\"let item of items; trackBy: trackById\">{{ item.name }}</li>\n    </ul>\n  `\n})\nexport class ExampleComponent {\n  items = [\n    { id: 1, name: 'Item 1' },\n    { id: 2, name: 'Item 2' }\n  ];\n\n  trackById(index: number, item: any): number {\n    return item.id;\n  }\n}"
      },
      "references": [
        {
          "label": "Optimizing Angular Performance in 2024: The Ultimate Guide",
          "url": "https://taglineinfotech.com/blog/angular-performance/"
        }
      ]
    },
    {
      "id": "angular-avoid-function-calls-in-templates",
      "description": "Avoid using function calls directly in Angular templates to prevent performance degradation.",
      "recommendation": "Compute values in the component class and bind them to the template to reduce unnecessary computations during change detection.",
      "codeExample": {
        "language": "typescript",
        "code": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <p>{{ computedValue }}</p>\n  `\n})\nexport class ExampleComponent {\n  private _value: number = 0;\n\n  get computedValue(): number {\n    return this._value * 2;\n  }\n\n  updateValue(newValue: number): void {\n    this._value = newValue;\n  }\n}"
      },
      "references": [
        {
          "label": "Mastering Angular Change Detection and Performance Optimization",
          "url": "https://30dayscoding.com/blog/angular-change-detection-performance-optimization"
        }
      ]
    },
    {
      "id": "angular-detach-change-detector",
      "description": "Detach the change detector for components that do not require frequent updates to improve performance.",
      "recommendation": "Use ChangeDetectorRef to detach and reattach the change detector as needed.",
      "codeExample": {
        "language": "typescript",
        "code": "import { Component, ChangeDetectorRef } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <p>{{ data }}</p>\n    <button (click)=\"updateData()\">Update Data</button>\n  `\n})\nexport class ExampleComponent {\n  data: string = 'Initial Data';\n\n  constructor(private cdr: ChangeDetectorRef) {\n    this.cdr.detach();\n  }\n\n  updateData(): void {\n    this.data = 'Updated Data';\n    this.cdr.detectChanges();\n  }\n}"
      },
      "references": [
        {
          "label": "Optimizing Angular Performance: Strategies & Best Practices",
          "url": "https://medium.com/@satvatiyasin/optimizing-angular-performance-strategies-best-practices-aa5d93b732d9"
        }
      ]
    }
  ]
}