Ng-News 23/30: Component Libraries, Signal-based Change Detection, Signal Dependency Graph
Tags: webdev, javascript, programming, angular
Published: 2023-07-31 15:18:00

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.

{% embed https://youtu.be/gLCmB4xcGWI %}  

## 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.


{% embed https://twitter.com/mgechev/status/1685369038007074816 %}

## 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.

{% embed https://www.youtube.com/watch?v=yhX81AODRMk %}

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

{% embed https://timdeschryver.dev/blog/use-angular-directives-to-extend-components-that-you-dont-own %}

## 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.

{% embed https://www.npmjs.com/package/@angular-architects/signals-experimental %}

{% embed https://twitter.com/MikeZks/status/1684277119256231937 %}

## 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.

{% embed https://medium.com/@eugeniyoz/dependency-graph-in-angular-signals-53ee47f75e21 %}

## New Releases

Transloco is a library for internationalisation and had with version 5 a new major release.

[Transloco Release Notes](https://github.com/ngneat/transloco/blob/master/libs/transloco/CHANGELOG.md#500-2023-07-30)

PrimeNg, a UI library, had a minor release to 16.1. Its main addition was in the area of accessibility.

[PrimeNg 16.1 Release Notes](https://github.com/primefaces/primeng/blob/master/CHANGELOG.md#1610-2023-07-26)

Finally Jasmine, the default testing library in Angular, went up to 5.1.

[Jasmine 5.1 Release Notes](https://github.com/jasmine/jasmine/blob/main/release_notes/5.1.0.md)