Gergely Szerovay for This is Angular

Posted on Jun 6, 2023 • Originally published at angularaddicts.com

Angular Addicts #14: Angular v16, Signals and SignalStore, fine-grained change detection & more

#angular #typescript #nx #javascript

👋Hey fellow Angular Addict

This is the 14th issue of the Angular Addicts Newsletter, a monthly collection of carefully selected Angular resources that got my attention. (You can read the first, second, third, fourth, fifth, sixth, seventh, eighth, ninth, tenth, eleventh, twelfth and thirteenth issue here.)

📢Release announcements

📢Angular v16 is now available!

The latest version of Angular was released this month. Minko Gechev summarizes the most important new features in his release announcement.

In my following articles, I listed out the most important changes and new features, and collected resources that will teach you how these new Angular features work:

💎Angular Gems of May, 2023

📰SignalStore RFC

The NgRx team and Marko Stanimirović opened a new RFC (Request for Comments) for a signal-based state management solution, SignalStore. It has a similar approach to @ngrx/component-store. The initial prototype alongside with the API documentation is available in the NgRx SignalStore playground repo.

To gain more knowledge of this new feature and its future implications, I created two versions of an “article list” component. I built a ComponentStore-based one first, then migrated it to a SignalStore-based one. I summarize my findings in this article: From NgRx ComponentStore to SignalStore: the key takeaways from my demo project. I explain the implementation steps and the main differences I found, so that you can better understand how SignalStores actually work.

📰Add Superpowers to your Angular Inputs 🔋 (New feature 🎉)

Angular v16.1 is going to support transform functions for the @Inputs decorators of the components. Enea Jahollari explains through examples how these transformations work.

Gaurav Mukherjee shows us how to use input transforms to get signal-based inputs in a component: "How to enjoy signal-based input right now!"

This feature is available starting from the v16.1.0-next.3 prerelease.

📰Accessing route params in Angular

In his article, Thomas Laforge discusses various methods for accessing route and query parameters:

ActivatedRoute's snapshot and params property
Ngrx Router Store
RouterInput in Angular v16

📰High ROI Testing With Cypress Component Testing

Christian Lüdemann shares his preferred testing strategy with us, it's based on Kent C. Dodds' testing trophy:

Write a few E2E smoke tests (Cypress)
Cover use cases with integration tests (Cypress component testing)
Cover edge cases and calculations with unit tests (Jest)
Static: Type everything and use strict mode (Eslint and Typescript)

He also explains how to set up Cypress and organize your tests to get the best results.

📰Deactivate Angular NgZone selectively — the easy way

RxAngular's unpatch directive helps us partially deactivate NgZone and achieve more fine-grained control over Angular's change detection. Daniel Glejzner explains through examples how to use this directive in different use cases.

📰Angular Developer Survey 2022 Results Summary

Nearly 12k developers participated in the Angular Developer Survey, Minko Gechev’s article summarizes the results and how these are reflected in Angular's roadmap.

📅Events and recordings

📅Angular at Google I/O 2023

The recordings of the Angular-related talks of Google I/O 2023 are available on this playlist:

Developer keynote
What’s new in Angular (Minko Gechev, Madleina Scheidegger)
Rethinking reactivity with Angular Signals (Emma Twersky, Simona Cotin)
Getting started with Angular Signals (Emma Twersky, Alex Rickabaugh)

👨‍💻About the author

My name is Gergely Szerovay, I work as a frontend development chapter lead. Teaching (and learning) Angular is one of my passions. I consume content related to Angular on a daily basis — articles, podcasts, conference talks, you name it.

I created the Angular Addict Newsletter so that I can send you the best resources I come across each month. Whether you are a seasoned Angular Addict or a beginner, I got you covered.

Next to the newsletter, I also have a publication called — you guessed it — Angular Addicts. It is a collection of the resources I find most informative and interesting. Let me know if you would like to be included as a writer.

Let’s learn Angular together! Subscribe here 🔥

Follow me on Medium, Dev.to, Twitter or LinkedIn to learn more about Angular!

🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them here, these are the latest 3 issues:

📨 Submit your Angular resource

Have you found or written an interesting Angular-related article, tweet or other resource lately? Please let me know here in the comments or send me a DM on Twitter! I might feature it in the next Angular Addicts issue!

DEV Community