{"id":1911,"date":"2024-01-01T10:03:39","date_gmt":"2024-01-01T09:03:39","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=1911"},"modified":"2025-11-04T11:10:42","modified_gmt":"2025-11-04T10:10:42","slug":"how-to-optimize-performance-of-large-lists-in-angular","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/how-to-optimize-performance-of-large-lists-in-angular\/","title":{"rendered":"How to optimize performance of large lists in angular"},"content":{"rendered":"

When dealing with extensive lists or tables in Angular, optimizing performance becomes crucial to ensure a smooth user experience. <\/span>In this post we will show you different ways to optimize the performance of large lists in Angular. We will be covering low hanging fruits<\/strong>, that are fairly easy to implement, two lazy loading<\/strong> strategies and two advanced rendering techniques<\/strong>. <\/span><\/p>\n

The following steps should clean up your code<\/strong> and increase the performance<\/strong> of your grid measurably. <\/span><\/p>\n

Low hanging fruits for optimize performance of large lists<\/h2>\n

1. Change detection strategy: OnPush<\/b><\/h3>\n

Most of the time, the change detection of Angular feels like a nice magic, that makes your life much easier. If you have a large app with a big amount of values though, you will realize that change detection is a complex thing, that can make your app a bit slow sometimes.<\/span><\/p>\n

If a value in your template is changed, Angular checks <\/span>each<\/b> value in the view for updates. Doing this Angular compares the old value with a supposed new value. Depending on the amount of data this can take a lot of time. To fix this problem, it is possible to change the c<\/strong><\/span>hange detection strategy<\/strong> of Angular on the component level. <\/span><\/p>\n

@Component({\r\n  selector: 'app-my-table',\r\n  templateUrl: '.\/my-table.component.html',\r\n  styleUrls: ['.\/my-table.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})<\/pre>\n
After this change, Angular only goes for a deep check if the <\/span>input <\/span><\/i>(@Input) reference of a value has changed. Otherwise Angular will only do a references check. If the references of the variable change, Angular will compare both values like mentioned before.<\/span><\/p>\n
Now you have to care to use immutable objects. Make sure to always create a new object instead of manipulating the old one, so the object gets a new reference and the change detection will work as expected. Using the <\/span>OnPush<\/span><\/i> strategy should significantly reduce the change detection calls.<\/span><\/p>\n
Angular also provides a way to trigger the change detection programmatically. It might be useful to trigger the change detection every few seconds programmatically, instead of triggering the change detection automatically every time a value has changed. <\/span><\/p>\n
Therefore take a look at this snippet:<\/span><\/p>\n
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-my-table',\r\n  templateUrl: '.\/my-table.component.html',\r\n  styleUrls: ['.\/my-table.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class MyTableComponent implements OnInit {\r\n\r\n  constructor(private cdr: ChangeDetectorRef) {\r\n  }\r\n\r\n  ngOnInit() {\r\n    \/\/ deactivate the change detection for this component and its children\r\n    this.cdr.detach();\r\n\r\n    \/\/ interval for doing the change detection every 5 seconds\r\n    setInterval(() => {\r\n      this.cdr.detectChanges();\r\n    }, 5000);\r\n  }\r\n\r\n}\r\n<\/pre>\n
For more information read here<\/a>.<\/p>\n
\n\"Angular\n<\/picture>\n<\/a><\/p>\n
2. The <\/b>updateOn<\/i><\/b> property<\/b><\/h3>\n
Each <\/span>FormGroup<\/span><\/i> has a property called <\/span>updateOn. <\/span><\/i>This property determines when the form validation for the current form group is called. Possible values are <\/span>change <\/span><\/i>(default), <\/span>submit <\/span><\/i>and <\/span>blur.<\/span><\/i><\/p>\n