Angular Addicts #14: Angular v16, Signals and SignalStore, fine-grained change detection & more
Tags: angular, typescript, nx, javascript
Published: 2023-06-06 06:36:50

---
title: Angular Addicts #14: Angular v16, Signals and SignalStore, fine-grained change detection & more
published: true
description: My favorite Angular resources of May, 2023
tags: #angular #typescript #nx #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2axrdflhkpl6fir9n35.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-05 21:22 +0000
canonical_url: https://www.angularaddicts.com/p/angular-addicts-14-angular-v16-signals
---

## 👋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](https://www.angularaddicts.com/p/angular-addicts-issue-1-nx-conf-dev-survey-more), [second](https://www.angularaddicts.com/p/angular-addicts-issue-2-angular-14-nx-14-rxjs-and-ngrx-tips-more-3c0e85a09d1e), [third](https://www.angularaddicts.com/p/angular-addicts-issue-3-6fddeaff8f47), [fourth](https://www.angularaddicts.com/p/angular-addicts-issue-4-micro-frontends-moduliths-tutorials-more-b36923db8cc2), [fifth](https://www.angularaddicts.com/p/angular-addicts-issue-5-new-features-in-angular-14-2-bundle-size-optimization-tutorials-more-7ac29b66d421), [sixth](https://www.angularaddicts.com/p/angular-addicts-issue-6-ng-conf-2022-ngrx-best-practices-application-architecture-tips-more-feabd4406a29), [seventh](https://www.angularaddicts.com/p/angular-addicts-issue-7-standalone-components-and-routers-native-federation-1-0-more-52d65695939a), [eighth](https://www.angularaddicts.com/p/angular-addicts-issue-8-angular-v15-ngrx-v15-component-test-tips-more-e88e95ee0f9d), [ninth](https://www.angularaddicts.com/p/angular-addicts-9), [tenth](https://www.angularaddicts.com/p/angular-addicts-10-new-features-in-angular-15-1), [eleventh](https://www.angularaddicts.com/p/angular-addicts-11-signals-is-coming), [twelfth](https://www.angularaddicts.com/p/angular-addicts-12-signals-code-organization) and [thirteenth](https://www.angularaddicts.com/p/angular-addicts-13-angular-v16-nx) issue here.)

---

## 📢Release announcements

### 📢Angular v16 is now available!

The latest version of Angular was released this month. [Minko Gechev](https://medium.com/u/a7db01a91fcb) summarizes the most important new features in his [release announcement](https://blog.angular.io/angular-v16-is-here-4d7a28ec680d).

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:

* [Master Angular 16](https://www.angularaddicts.com/p/master-angular-16)
* [Signals Study Guide](https://www.angularaddicts.com/p/angular-signals-study-guide)

---

## 💎Angular Gems of May, 2023

### 📰[SignalStore RFC](https://github.com/ngrx/platform/discussions/3796)

The NgRx team and [Marko Stanimirović](https://twitter.com/MarkoStDev) opened a [new RFC (Request for Comments) for a signal-based state management solution, SignalStore](https://github.com/ngrx/platform/discussions/3796). 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](https://github.com/markostanimirovic/ngrx-signal-store-playground).

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](https://www.angularaddicts.com/p/from-ngrx-componentstore-to-signalstore). I explain the implementation steps and the main differences I found, so that you can better understand how `SignalStore`s actually work.

---

### 📰[Add Superpowers to your Angular Inputs 🔋 (New feature 🎉)](https://itnext.io/add-superpowers-to-your-angular-inputs-new-feature-4fb89b31b6e8)

Angular v16.1 is going to support transform functions for the `@Inputs` decorators of the components. [Enea Jahollari](https://twitter.com/Enea_Jahollari) explains through examples how these transformations work.   

[Gaurav Mukherjee](https://twitter.com/lifekefunde) shows us how to use input transforms to get signal-based inputs in a component: ["How to enjoy signal-based input right now!"](https://itnext.io/how-to-enjoy-signal-based-input-right-now-56efecaeee98)

This feature is available starting from the [v16.1.0-next.3](https://github.com/angular/angular/releases/tag/16.1.0-next.3) prerelease.

---

### 📰[Accessing route params in Angular](https://medium.com/ngconf/accessing-route-params-in-angular-1f8e12770617)

In his article, [Thomas Laforge](https://twitter.com/laforge_toma) 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](https://christianlydemann.com/high-roi-testing-with-cypress-component-testing/)

[Christian Lüdemann](https://twitter.com/chrislydemann) shares his preferred testing strategy with us, it's based on [Kent C. Dodds' testing trophy](https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications):

* 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](https://dev.to/this-is-angular/deactivate-angular-ngzone-selectively-the-easy-way-54b5)

RxAngular's <code>[unpatch](https://www.rx-angular.io/docs/template/api/unpatch-directive)</code> directive helps us partially deactivate <code>NgZone</code> and achieve more fine-grained control over Angular's change detection. [Daniel Glejzner](https://twitter.com/DanielGlejzner) explains through examples how to use this directive in different use cases.

---

### 📰[Angular Developer Survey 2022 Results Summary](https://blog.angular.io/angular-developer-survey-2022-results-summary-d17c88f62690)

Nearly 12k developers participated in the Angular Developer Survey, [Minko Gechev](https://twitter.com/mgechev)’s article summarizes the results and how these are reflected in Angular's roadmap.

---

## 📅Events and recordings

## 📅[Angular at Google I/O 2023](https://www.youtube.com/playlist?list=PL1w1q3fL4pmjyUKydoTC3lp9cuWfLRdsK)

The recordings of the Angular-related talks of Google I/O 2023 are available on this [playlist](https://www.youtube.com/playlist?list=PL1w1q3fL4pmjyUKydoTC3lp9cuWfLRdsK):

* Developer keynote
* What’s new in Angular ([Minko Gechev](https://twitter.com/mgechev), Madleina Scheidegger)
* Rethinking reactivity with Angular Signals ([Emma Twersky](https://twitter.com/twerske), [Simona Cotin](https://twitter.com/simona_cotin))
* Getting started with Angular Signals ([Emma Twersky](https://twitter.com/twerske),[ Alex Rickabaugh](https://twitter.com/synalx))

---

## 👨‍💻About the author

My name is [Gergely Szerovay](https://www.linkedin.com/in/gergelyszerovay/), 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](https://angularaddicts.com/). 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](https://www.angularaddicts.com/) 🔥

Follow me on [Medium](https://medium.com/@GergelySzerovay), [Dev.to](https://dev.to/gergelyszerovay), [Twitter](https://twitter.com/GergelySzerovay) or [LinkedIn](https://www.linkedin.com/in/gergelyszerovay/) to learn more about Angular!


## 🕹️Previous issues

If you missed the previous issues of the newsletter, you can read them [here](https://www.angularaddicts.com/t/angular-addicts-monthly), these are the latest 3 issues:



* [Angular Addicts #13: Angular v16, NX v16, SPARTAN & more](https://www.angularaddicts.com/p/angular-addicts-13-angular-v16-nx)
* [Angular Addicts #12: Signals 🚦, Code organization principles, WebExpo & more](https://www.angularaddicts.com/p/angular-addicts-12-signals-code-organization)
* [Angular Addicts #11: Signals 🚦 is coming, Angular 15.2: automatic migration to standalone components & more](https://www.angularaddicts.com/p/angular-addicts-11-signals-is-coming)


## 📨 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](https://twitter.com/gergelyszerovay)! I might feature it in the next Angular Addicts issue!