Ng-News 23/30: Component Libraries, Signal-based Change Detection, Signal Dependency Graph

No plan for functional components. Dany Paredes on how to wrap components properly. Michael Egger-Zikes with an experimental Signals library and Yevgeny Tuboltsev on how Signals track each other.

Authoring Format Changes

The Angular roadmap lists an improvement for the authoring format. In addition, we see currently a trend towards a more functional-based approach. For example the router guards, the interceptors, the inject function, or the upcoming input function for the Signal Component. This led to the rumour that we will get functional components as well.

Minko Gechev, Angular product lead, lowered those expectations. It is more likely that the class stays and the upcoming improvements are not that ground-shaking.

Component Libraries

Wrapping components is not always easy. If the wrapped component has a lot of properties, the wrapper component needs to provide them as well. That might lead to a copy & paste orgy.

Dany Paredes combined directives together with new the composition API to solve this problem in an elegant and Angular-stylish way.

He appeared on the AngularAir podcast and the recording is available on YouTube.

There is also an older article on that topic from Tim Deschryver.

timdeschryver.dev

Experimental Signal-based Change Detection

Since last week, we know that the Signals Component will arrive earliest in Angular 18. The main advantage of that new component type is that it runs without zone.js which is currently also the trigger for the Signals.

Michael Egger-Zikes came out with a very special library where the Signal is already the trigger for the change detection.

His library patches Angular. So the intention is not to use it in production. Nevertheless, it allows experimenting with Signal-based change detection and preparing our applications and libraries for the future.

@angular-architects/signals-experimental - npm

[![npm](https://img.shields.io/npm/v/%40angular-architects%2Fsignals-experimental.svg)](https://www.npmjs.com/package/%40angular-architects%2Fsignals-experimental). Latest version: 1.0.2-ng.16.1.7, last published: 3 months ago. Start using @angular-architects/signals-experimental in your project by running `npm i @angular-architects/signals-experimental`. There are no other projects in the npm registry using @angular-architects/signals-experimental.

npmjs.com

Dependency Graph in Angular Signals

Yevgeny Tuboltsev wrote an article about the underlying dependency graph of Signals. He demonstrated the automatic tracking feature between producer and consumer and also gives examples of use cases where we need to opt-out.

Yevgeny also wrote other articles. All of them deal with Signals from a different aspect.