Improve Angular Performance by Understanding Change Detection

Improve Angular Performance by Understanding Change Detection

Angular Performance and Optimization Checklist

Angular Performance and Optimization Checklist

Angular is one of the powerful and high performing front-end framework. Applications will start becoming slow as it grows if you are not aware of how to optimize the application, it will start affecting end-user experience.

Image for post

To know in advance and fix the performance, it is better to know the optimization techniques. There are many ways we can optimize your Angular application, Here I would like to discuss some of the techniques which were really helpful in my development.

Let’s discuss the techniques to avoid unnecessary change detections in Angular Application.

1. ChangeDetection Strategies: OnPush

With this Angular brought change detection strategies: Default and OnPush.

Default Strategy: By default, Angular uses the ChangeDetectionStrategy.Default change detection strategy.

In the default strategy, every time something changes in our application due to any events the change detection will trigger for all the components

For example:

  • In this example, we are changing the name value and if we notice in the console log components are getting triggered for all times even we don't have any relation with the child component.
  • This technique of angular is called dirty checking. In order to update the view, each time the parent component changes the value, angular compare the old value with the newer value each time something happens in the parent component.
  • When we are working with a complex application, with hundreds of inputs, If we follow the default strategy we might face performance issues in the longer run.

angular javascript angularjs

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Angular vs AngularJS: Differences Between Angular and AngularJS

What is the difference between Angular vs AngularJS? One vital distinction between Angular vs AngularJS is AngularJS is JavaScript-based while Angular is TypeScript based. These two frameworks have similarities as a front end, open-source platform that create dynamic SPAs but let’s look at their differences.

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular vs AngularJS | Difference Between Angular And AngularJS | Angular Training

This video on Angular vs AngularJS differentiates between the two frameworks. Although Angular and AngularJS are used interchangeably, they are significantly different. JavaScript based AngularJS was the first ever released version. However, the subsequent version are the TypeScript based Angular framework.

Angular vs. AngularJS: Difference between Angular and AngularJS

Angular vs. AngularJS will help you differentiate between TypeScript-based Angular and JavaScript-based AngularJS based on various factors. What is Angularjs? What is Angular? Why compare Angular and AngularJS? Angular vs AngularJS