🔧 Angular Tips #1

Some Tips for Working with Angular — From a Frontend Developer.

Angular is an extremely challenging framework for beginners to learn. It offers a wide range of features, from simple to highly complex functionalities, making it quite overwhelming. As a front-end developer who has worked with multiple frameworks like React, Vue, and Svelte, I can confidently say that Angular is the most challenging one to learn and work with.

However, the more time I spend working with Angular, the more I realize that it is an incredibly powerful framework when used proficiently. It offers a complete ecosystem that provides everything needed to build functional, complex, and visually appealing websites.

Angular is powerful, but as I mentioned earlier, its learning curve is quite challenging. Through this blog, I want to share some tips I’ve learned from working with Angular for many years. I understand that some of these tips may not be entirely applicable to every project. If that’s the case, feel free to let me know in the comments. Now, let’s get started!

Note: These tips require prior knowledge and experience with Angular. I will not dive deep into RxJS or any fundamental concepts.

Prefer using OnPush for the change detection strategy over the Default one.

When working with Angular, I prefer using OnPush as the change detection strategy in all my projects. The reason is quite simple:

• It reduces the number of checks needed to detect state changes and update the DOM. Naturally, the less work the application has to do, the better its performance and user experience.
• I have more control over my components. You might think that using OnPush requires manually triggering change detection every time data is updated, which could lead to unexpected bugs if forgotten. However, in the next tip, I'll show you how I usually prevent such scenarios.
• It helps prevent race condition errors when working with complex streams and subscribers. While rare, they do happen — I encountered them two or three times when using the Default strategy. These issues are difficult to reproduce, but trust me, they can be extremely frustrating and complicated to fix properly.

If you don’t want to manually update the change detection strategy every time you create a new component, you can set OnPush as the default across your application by configuring it in the angular.json file.

// angular.json
{
  //...
  "schematics": {
    "@schematics/angular": {
      "component": {
        "changeDetection": "OnPush"
      }
    }
  }
}

Prior to using async pipe or signal

The async pipe is a powerful tool in Angular that simplifies working with observables. To use it, your data must be defined as an observable. So why is it so useful?

• It ensures seamless state and view updates. As mentioned earlier, there’s a way to automatically trigger change detection whenever the data changes — this is exactly what the async pipe does. Under the hood, it calls markForCheck, ensuring the component is checked for changes when a new value from the source of observable is emitted.
• It prevents memory leaks. When the component is destroyed, the async pipe automatically unsubscribes from the observable, eliminating the need to manually manage subscriptions. This is crucial for maintaining performance in web applications.
• With Angular 18, a new API called signal has been introduced. Like the async pipe, signal handle change detection and memory management automatically. I won’t dive deep into signal here, as its functionality is straightforward and well-documented in the official Angular docs.

In short, if your application isn’t using the async pipe or signal yet, consider updating it. I promise—it will be a huge relief!

And that’s all for blog #1 about the Angular tips! I hope you found these tips helpful. See you in my next blog!