Angular 17.1 brings new features to the framework and goes one step further towards signal-based components with the introduction (as a developer preview) of Signal inputs.

What’s a Signal input?

Instead of using the @Input decorator, we can now use the input() function from @angular/core. This function creates an input value that is received as a signal. Here is an example:

Since name is a signal, it can be read like so:

There are several benefits to that approach. For instance, you can derive a value from that input without using ngOnInit or ngOnChanges. Instead, we can use computed:

You can see the above code in action on Stackblitz.

The new API also supports required inputs with the input.required function to ensure a value is passed to the component/directive:

Router

We can now pass information to a route using the info option as follows:

Or using the router service:

This info object is not persisted in the browser session history, unlike the state option, which can also be used to pass data to a route.

Application builder migration

If you still need to migrate to the new Vite-based application builder, you can do so with one simple CLI command now:

ng update @angular/cli --name=use-application-builderCode language: CSS (css)

Unit tests without a browser

Another exciting update is an addition to the ng test command so you can run your unit tests without opening a browser, which is perfect for continuous integration, for instance:

ng test --no-browsers

These are the most essential changes in Angular 17.1. I’d say it’s a pretty good release!

Welcome to the first edition of the Weekly Angular Newsletter! With this new weekly format comes the option to do things differently, such as more in-depth tutorials, code challenges, or audio/video content.

As a result, I would like to collect your input by filling out this form. That way, I’ll know what content works best for you, which topics you want me to cover, and in which format. I pre-selected a few options in the form, but feel free to submit completely different ideas if needed. Thanks a lot!

Free conference tickets, anyone?

I’ll speak at DeveloperWeek 2024 soon, in-person in the San Francisco Bay Area and Online a week later. The organizers allowed me to share free tickets with you so you can attend the conference in person or remotely. You can register here for free.

DeveloperWeek is a generalist developer conference with multiple tracks and topics: AI and machine learning, web, Dev Ops, APIs and micro-services, and more. My talk will be about Cypress, and you can also register for my free online workshop for similar content.

Finally, I’m also speaking at ng-conf 2024 this year! I have ONE $225 discount code to give away, and the first person to reply to this email will get the code so they can enjoy a discounted ticket to the best Angular conference in the world!

My talk at ng-conf will be a 2-hour workshop on server-side rendering with Angular! I hope to see many of you there. In the meantime, don’t forget to give me your input, claim a free conference ticket, and get ready for next week’s post!

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.

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.

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.