1 min read
This article also exists in: Arabic

If you start to find bad performance in your Angular application then you have to use OnPush Strategy ChangeDetectionStrategy. Let’s talking about OnPush Strategy and how you can apply on your Angular application.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush, // To active OnPush
})
export class TestComponent {
  constructor(
    private changeDetectorRef: ChangeDetectorRef 
  ) {}
  loadSomeData(): void {
    // Load the data by calling endpoints
    //.......

    // To rerander html manually after load data
    this.changeDetectorRef.detectChanges();
  }
}

You need to add this line changeDetection: ChangeDetectionStrategy.OnPush on your typescript file to stop the Angular default change detector. Use the OnPush (CheckOnce) strategy, meaning that automatic change detection is deactivated until reactivated by setting the strategy to Default (CheckAlways). Change detection can still be explicitly invoked. This strategy applies to all child directives and cannot be overridden.

If any data are coming from the endpoint and you want to force rerender from DOM then you need to call this.changeDetectorRef.detectChanges(); That is the basics of the OnPush Strategy idea and we will talk in detail later on other posts.

About the author

For the last decade, Shady Nagy has worked with a variety of web technologies. He is currently focused on code quality. On his day to day job, he is working as a team leader engineer. As a digital nomad, he is living where the WiFi and sun are 😎
Do you want to know more? Visit my website!