Top 3 Common Errors New Angular Developers Make

The Three Mistakes New Angular Developers Make Most Often

With the release of Angular v14, there is plenty of excitement around the new capabilities it introduces. Many of these features, such as typed forms, standalone components, diagnostics, and accessibility improvements, were previewed during Google I/O - State of Angular.

However, regardless of the updates in Angular 14, newcomers to the framework will still encounter the same pitfalls that have always tripped up beginners.

Typical Pitfalls for Angular Beginners

These are some of the most frequent errors I made when I first started working with Angular.

1. Neglecting to Unsubscribe

This is probably the most common issue. If you are coming from a React background and aren't using RxJS, you likely never had to worry about this.

Whenever you subscribe to an observable, Angular creates a Subscription object. If you fail to unsubscribe or otherwise manage it, you risk introducing memory leaks at runtime.

There are several strategies for unsubscribing:

1. Call the unsubscribe() method. You can manually invoke this within the component's ngOnDestroy() lifecycle hook.
2. Leverage the Angular Async Pipe. This is my preferred approach since it allows me to avoid managing subscriptions manually—Angular takes care of them automatically.
3. Utilize RxJS take operators. Options like take, takeUntil, or takeWhile are viable, though this approach requires a deeper understanding of RxJS.
4. Apply the RxJS first operator. Similar to the previous point, this solution demands a certain level of comfort with RxJS operations.

A notable drawback of relying on RxJS is that if a component is destroyed before the observable emits a value, the subscription continues to exist.

To prevent this, you must ensure subscriptions are explicitly cancelled within the ngOnDestroy hook when a component is torn down.

I could elaborate further with concrete examples in a future article. Let me know if you are interested, or if you have a different approach you prefer.

2. Misapplying Data Binding

I frequently see developers defaulting to two-way data binding everywhere, mainly because it is straightforward and works out of the box.

[(ngModel)]="propertyNameInClass"

But why not use property binding or event binding instead?

The truth is that two-way data binding can become computationally expensive, leading to a degradation in web performance over time.

Make sure you apply the appropriate binding syntax:

• Event binding. (click)="methodInClass()" sends event data from the template to the component class.
• Property binding. [hidden]="propertyInClass" transfers data from the class to the template.
• String interpolation. <h2>{{title}}</h2> renders data from the class in the view. This is generally suitable for displaying string values.

3. Interpolating Method Calls

I am guilty of this one myself! Fortunately, I have stopped doing it, and you should too.

As noted earlier, string interpolation allows you to embed JavaScript expressions inside double curly braces to render dynamic content on the page.

If the data needs transformation before being displayed, avoid doing it by invoking a method within the curly braces:

// don't do this

`<h2>{{getTitle()}}</h2>` 

Calling a method directly inside the interpolation braces harms the performance and overall user experience of your application.

Instead, consider using Angular pipes, building a custom pipe, or ensuring that any expensive operations are handled elsewhere.

Wrapping Up

I have been working with Angular in a professional setting for under a year, and it has certainly been a learning experience.

Your own journey may differ, and I am eager to hear about the common mistakes you have observed.

The learning curve is undeniably steep, but fortunately, the Angular team is actively developing a new Getting Started guide for those who are new to the framework.

This is encouraging news, even if it means my small Angular tutorial may soon become outdated.

Still, if there is a superior resource available, the entire community stands to gain from it.

Want to connect? You can find me on Twitter or feel free to drop a comment below!