Top 3 Common Errors New Angular Developers Make

#webdev #angular #programming #beginners

Angular v14 has been released, and I am looking forward to trying the new features that come with it.

Most of the features were announced at Google I/O - State of Angular among which typed forms, standalone components, accessibility, and diagnostics.

Despite the hype on Angular 14, new developers will face the same problems new Angular developers faced before this version.

Most Common Errors New Angular Developers Make

Here are some of the most common mistakes I was making when I started to use Angular.

1. Forget to Unsubscribe

This has to be the first one.
Coming from React, you don't really need to think about this if you don't use RxJS.

When you subscribe to an observable, Angular creates a Subscription object. If we don't unsubscribe, or at least handle it, there might be memory leaks at runtime.

There are a few ways to unsubscribe:

Use the unsubscribe() method. Unsubscribe from the subscription inside the ngOnDestroy() method of your component.
Use Angular Async Pipe. I prefer this way because I can forget about subscriptions and Angular handles them automatically.
Use some RxJS take operator. You can use any of these: take, takeUntil, or takeWhile. This approach is a bit advanced because it requires more RxJS.
Use RxJS first operator. As for the previous point, this approach requires you to be comfortable with RxJS.

One downside of using RxJS is that when the component gets destroyed before the observable emits, the subscription stays alive.

As a result, when the component is destroyed, we must explicitly cancel the subscriptions in the ngOnDestroy hook to ensure safety.

I might expand and add examples of these ways to handle subscriptions in another post. So, let me know if you are interested or if you use other ways.

2. Using Data Binding Incorrectly

I often see people using two-way data binding everywhere because it just works and it is quite easy to handle.

[(ngModel)]="propertyNameInClass"

So, why bother with property binding or event binding?

Well, it turns out two-way data binding can become expensive and it can lead to poor web performance over time!

Use the correct data binding syntax

Event binding. (click)="methodInClass()" passes event data from the template to the class.
Property binding. [hidden]="propertyInClass" gets data from the class into the template.
String interpolation. <h2>{{title}}</h2> displays data from class. Generally, you only want to display strings.

3. String Interpolation & Methods

I am guilty of this! But sure enough, I am not doing it anymore. And you shouldn't too!

As briefly mentioned above, string interpolation allows us to write JavaScript expressions within double curly braces to add dynamic content to a web page.

If we need to change the data before presenting it on the view, we should not do it by calling a method inside the curly braces:

// don't do this

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

Calling a method inside the curly braces degrades the efficiency and user experience of your app.

Use Angular pipes, create your custom pipe or make sure you make expensive operations elsewhere.

That's almost it!

I have been using Angular professionally for less than a year and it has been quite a journey.

Your experience might be different and I would love to hear what are the most common mistakes you have see.

In my opinion, the learning curve is quite steep and luckily the Angular team is working on a new Getting Started path for developers new to the framework.