Ideas to improve your Angular skills in 2024

Alain Chautard

The number one impediment I’ve seen over the years for Angular developers to grow with the framework is that they’re stuck with an older version of Angular at work and can’t use any of the modern features of Angular 16 and 17, for instance.

This tends to happen because of dependencies, which makes this newsletter entry on picking your dependencies one of the most critical pieces of advice of the year. As a result, this would be the number 1 skill I’d recommend for an Angular team lead or solo coder because it will allow you to upgrade often and never stay out of touch with the framework.

On a side note, being (or becoming) the developer who takes the initiative to create a branch and upgrade Angular to a newer version will make you indispensable at work, which is the best thing for career advancement.

Another idea, if your work project is up-to-date, is to start introducing Signals or the new control flow syntaxes. This will achieve the same result as a complex upgrade: Your colleagues will be more reliant on you for all things Angular, which elevates your status in the company.

If your current work project seems helpless, challenge yourself with a side project, which could be one of my Angular certifications or even the Angular Accelerator program, where you’ll build a brand new app with Angular 17 through challenging yet realistic exercises.

So that’s what I would recommend:

1) Take charge at work and try to upgrade existing apps (or introduce modern features such as Signals into them if you’re already up-to-date)

2) If achieving any of this in your work projects seems impossible, try to do so by working on open-source projects, certifications, or a series of exercises similar to the Accelerator program.

Angular 16 and 17 top features

Alain Chautard

This year, Angular has had two major versions with really major changes. This post highlights the top three features of Angular 16 and 17 worth getting into before we start 2024, with links to all relevant newsletter entries so far so you can revisit and explore those:

  1. Angular Signals (dev preview in 16, officially released in 17)

Signals are super important for performance; they make Angular easier to learn (compared to RxJs), and they’re just a cool feature to get into!

2. defer() block for lazy-loading (dev preview in 17)

Lazy-loading is one of the main Angular features to improve app performance and defer() is a brand new tool we have available to customize lazy-loading in all sorts of creative ways.

3. New control flow syntaxes (dev preview in 17)

If the ngIf - else syntax drives you crazy. You’ll love the new block-based control flow syntax. It’s convenient, easy to read, and does not require any dependencies, which is better for performance and simplifies the creation of standalone components (no imports needed!):

You can also check out this post with short video recaps of Angular 17 features and my full recap of Angular 16 features.

Most popular posts of 2023

Alain Chautard

Happy holidays! As we get closer to the end of the year, this week will be all about recaps from what we covered in this newsletter in 2023. That way, you can revisit important topics covered so far as we prepare for 2024.

Also, in 2024, the newsletter will start a weekly cadence instead of daily, so you’ll still get Angular content for free, but once a week instead of every workday.

Most popular post: Three ways to update Angular Signals.

Angular 17 removed one of these three methods to simplify the Signals API. Only set() and update() are left at this point. I also have a super cheap Signals course if you want to learn more during the holidays.

Second place: Using a loading template with ngrxLet.

Loading animations and skeleton loaders are always popular topics, probably because most web apps use such features to some extent.

Third place: RxJs withLatestFrom operator.

We covered many RxJs operators this year, and withLatestFrom was the most popular one. If you’re looking for more, shareReplay and forkJoin are some good recommendations.

Angular Component Testing with Cypress

Alain Chautard

Great news! Thanks to all your contributions, I’m happy to organize another coffee-fueled 2-hour workshop in January, which will be about testing Angular components with Cypress!

The date is January 18th, 2024, at 9 am US/Pacific (time zone converter here).

Like last time, the workshop will be on Zoom, and we’ll have a few hands-on exercises. A recording will be shared with all attendees after the workshop. You can register here and contribute here to keep me caffeinated.

If you have ideas for future workshops, please let me know. I do have a few, but I’m always open to suggestions.

Animated Route Transitions with Angular 17

Alain Chautard

Yesterday, we covered how to generate CSS animations for our Angular applications. Today, let’s see how to use such animations as route transitions when navigating from one route to the next:

The first thing we need to do is add the right providers for animations and transitions along with our routing config:

Then, we can create two different animations: One to exit the current “page” and one to enter the next “page.” In my example, I made two animations called entrance and exit using the CSS animation generator tool:

Angular has two specific selectors for view transitions: ::view-transition-old(root) for the exit of the old page and ::view-transition-new(root) for the entrance of the new page. Our next step is to “plug” our animations into these selectors:

And… that’s it! Router animations are now in place. You can see the code for that example in action on Stackblitz.

CSS Animation Generator

Alain Chautard

The end of the year is getting closer and closer, and I realized I haven’t covered anything CSS-related in this newsletter yet! Let’s fix this today with a tool that makes generating CSS animations super easy: CSS generator.

As you can see in the animation, you only need to select a type of animation, tweak some parameters, and then copy/paste the provided CSS code into your app. This example shows you how I used that tool to animate all my divs:

I created a quick example in Stackblitz to see that code in an Angular app. Note that CSS generator can be used for other CSS purposes, such as tweaking border-radius options, opacity, sepia filters, and more. It’s a great way to discover new CSS features and config options since CSS is probably the web language that has evolved the most over the past ten years.

Typescript enums and why I avoid them

Alain Chautard

As an Angular coach, I review a lot of Angular applications. One thing that I see in a lot of code bases is the use of Typescript enums to store a bunch of constants:

The above code creates a new type CompassDirection with four possible values: CompassDirection.North, CompassDirection.East, etc.

Each constant gets assigned a numerical value starting at 0, so in that example, CompassDirection.North is equal to 0, and CompassDirection.North is equal to 3.

These values can be customized, and we can use strings, objects, or anything we want instead of numbers:

And that’s about all you can do with enums in Typescript.

Why I avoid enums

I avoid enums because they’re neither convenient nor performant. For instance, this is what the last example gets compiled into by the Typescript compiler:

That’s not pretty, and it comes at the extra cost of all that code being downloaded in the browser and then interpreted, which impacts performance.

Also, enums aren’t very convenient to be used in component templates. If I want to use an enum in a component template, I need this additional code to make that type accessible on the component instance (the this reference):

Instead, we could use a union type:

We still get a type associated with specific values, but now this gets compiled into the following:

No, I didn’t forget anything in that black rectangle: Union types are like interfaces and don’t get compiled into anything, meaning they do not increase the size of your code base or impact performance. Also, since those types are just the union of other types (such as strings or numbers), these constants can be used as-is in a component template without needing to tweak our component class.

In other words, union types preserve type safety without degrading our app’s performance, which is a win-win.

Dynamic forms with FormArray

Alain Chautard

We’ve covered reactive and template-driven forms in the past. One of the nice features of reactive forms is the FormArray class. You can use FormArray for a form where the number of inputs is dynamic and can increase or decrease:

To achieve the above, we create a FormArray in our component and add a method so we can append new FormControls to that array:

Then, we use a @for block to display all controls of that array in our template, including a button to add new names to the list. Note that we store the index of each control in a local variable i:

We can even add support for the removal of form elements using the removeAt method of FormArray and the index of the element to remove:

And that’s it! We can check that the FormArray value is updated correctly with the following expression:

You can see that code in action on Stackblitz here. You can read this excellent guest post from Jennifer Wadella on my blog for more information on dynamic forms.

Typescript Cheatsheet: Type

Alain Chautard

A few months back, I shared a cheat sheet for Typescript Control Flow. Today, I want to share a cheat sheet on types, which are the main reason why Typescript is so useful.

A few interesting features that aren’t too well known:

  • The keyof operator and the Type[Property] illustrated in the Mapped Types section
  • One of my favorites: Union types and the even more powerful Template Union Types (bottom right corner of the cheat sheet)

You can click here to see the full-size cheatsheet.

Prefetching with the @defer block

Alain Chautard

We’ve covered how to use @defer to lazy-load blocks of code in our Angular v17+ applications. We also touched on the different trigger options as well as the ability to create custom triggers with when.

Yet there’s more to uncover with the prefetch option:

The above code would display my-component when the user interacts with the web page, but it would prefetch the code on idle, meaning as soon as the browser isn’t busy doing anything else. That way, when the user starts interacting with the page, the component has already been downloaded (or is currently downloading) from the server, which speeds things up.

The nice thing about prefetch is that it supports the same triggers (idle, viewport, interaction, hover, immediate, timer) as the @defer block, which allows for lots of different possible customizations.