A sequel to(Good to know) Angular V18.0: Walking through a new release
Introduction
It’s been a while that angular v19 has been released and a new version is going to be arrived in May. Angular v19 offers groundbreaking features that focus on performance optimization, enhanced server-side rendering and a rich developer experience. Here, we will have a quick walk inside the new things that are becoming prominent in angular v19.
1. Standalone Components by Default
Now, from v19, when you create a component, pipe and directive the standalone:true is added by Default. You don’t have to specify manually. If in case you don’t want the component to be standalone, then you can register the component in the respective NgModule and set standalone:false in the component.
And also, additionally if there are unused imports in standalone components, now CLI warns you, guides you keep code clean.
2. Signals
We are not done with signals yet. In the previous versions, that is V17 and v18, signal become more prominent, but the work still progressed to ensure the signals are stable adding more value to APIs. You may handle various signal based APIs without worriying about stablity. Now, it would be good to rely on signal inputs, signal outputs and queries provided by signals.
New experimental APIs are being developed from v19 to make signals even more powerful.
linkedSignal: A signal that, combines a computed expression with mutable state. It is a signal, but when you create a linked signal you define it using already existing signal. Now, the linked word in it makes sense.
Resource and rxResource APIs (Developer Preview)- Streamlining Data Retrieval
Simplifies handling asynchronous values in Angular’s signal graph.
3. Automatic Refactoring Tools
When signals are becoming developers favourite from angular v18, still it was a bit manual work to convert an input property to a signal. Now in v19, we got a tool which can does this job.
- signal-queries-migration: This will help to migrate existing code of queries like ViewChild and ContentChild to use signals.
- signal-input-migration: This will help you to get rid of old inputs, the case when you want to replace old inputs with signal inputs.
Below you will find the commands which does the job for you and saves a lot of your work.
Inputs to signal based inputs-
ng g @angular/core:signal-input-migration
ViewChild and ContentChild to respective signals-
ng g @angular/core:signal-queries-migration
function components to the new output signals api-
ng g @angular/core:output-migration
4. Zoneless Change Detection
When Zone.js introduced in the early days in angular, it has provided a strong foundation. But, when the applications got more complex, it introduced some additional computational burden and increased bundle size.
And this is where you need something called zoneless change detection. This one activated through provideExperimentalZonelessChangeDetection(). The result of which provided the following benefits.
- Overall application performance has been improvised.
- Bundle Sizes are Smaller.
- Debugging process got simpler.
5. Two-Dimensional Drag & Drop in CDK
Two-dimensional drag-and-drop functionality is being supported by the CDK, by supporting both horizontal and vertical dragging simultaneously has increased the flexibility in implementing draggable objects.This feature can be used in the complex data tables involving sorting and complex tree view structures with respect to interchanging labels.
6. Local Variables in Templates
Angular 19 supports an usage of local variables in templates, which could be easier to manage async data or element references directly in the template.
@let list = List$ | async;
Conclusion
Angular developer community getting increased with huge enterprise applicaitons coming to market. By introducing features that streamline workflows and improving debugging and testing capabilities, the framework continues to empower developers to build with confidence.
Happy Coding!
