What’s new in Angular v18

Summary

The Angular team announces the release of Angular V8 at Google's Bay View campus, focusing on enhancing developer experience and web app scalability. Key updates include template-level lazy loading, improved reactivity with Angular Signals, server-side rendering support, and more. A major highlight is the redesign of Angular's reactivity system to make Zone.js optional, with new APIs like signals and computed stabilizing in V17. Angular Material 3 theming is now stable, offering updated visual styles based on Material Design 3. The team also previews partial hydration support and experimental features for a zones-less Angular, aiming to shape the framework for the next decade of web development.

Takeaways

• 🎉 Angular V8 has been released with a focus on improving the developer experience and scaling robust web apps.
• 🔍 The team introduced new features like template level lazy loading with the new defer syntax and improved reactivities with Angular Signals.
• 🛠 Support for server-side rendering and hydration has been enhanced, allowing for better performance and developer tools visualization.
• 🔧 Optional Zones is a significant initiative where the Angular team is working on making Zone.js optional for Angular applications without sacrificing performance or developer experience.
• 🌐 Alex Ricka, the technical lead for Angular, shared insights into the progress made on redesigning Angular's reactivity system to potentially remove the dependency on Zone.js.
• 📈 In Angular V16, three new reactive primitives—Signal, Computed, and Effect—were introduced to provide a new reactivity model that could work without Zones.
• 📚 Collaboration with community state management libraries like ngrx, ngxs, and RX Angular ensures compatibility and integration with the new Signal API.
• 🔄 Angular V17 made Signal and Computed stable APIs, and V8 is expected to bring hybrid change detection and an experimental API to disable Zone.js integration entirely.
• 🌟 Angular Material 3 theming APIs have been stabilized in version 18, offering updated visual styles based on Material Design 3 with simplified and more flexible theming.
• 🔄 Angular is working towards full developer preview of zones-less compatibility, including with Angular's own packages and popular libraries in the ecosystem.
• 🔍 Partial hydration support is in development, allowing developers to specify portions of the application to remain dehydrated for improved performance.

Q & A

What is the main focus of Angular V8 release?

The main focus of Angular V8 is to improve the developer experience for teams of all sizes and to introduce features that will help in building robust web apps that scale.

What are some of the new features introduced in Angular V8?

Some of the new features in Angular V8 include template level lazy loading with the new defer syntax, improved reactivities with Angular signals, support for server-side rendering and hydration, and more.

What is the significance of making Zone.js optional in Angular applications?

Making Zone.js optional is significant because it addresses the challenges of maintaining and safeguarding performance or debugging reactivity as applications scale. It also reduces the cost of loading and initializing zones as new web APIs are added.

What are Angular's three new reactive primitives introduced in V16?

The three new reactive primitives introduced in Angular V16 are Signal, Computed, and Effect. These APIs are central to the new reactivity model in Angular.

How does the hybrid change detection work in Angular V8?

Hybrid change detection in Angular V8 allows Angular to listen to signals and other notifications about changes and schedule change detection even if Zone.js doesn't patch an API or if changes are made outside of the Angular Zone.

What is the purpose of the experimental API to disable Zone.js integration in Angular V8?

The experimental API to disable Zone.js integration allows applications to run fully in zoneless mode. It is provided to collect feedback and gather data on which patterns work with zoneless and where more effort might be needed.

What updates were made to Angular Material in version 18?

In Angular version 18, Material 3 theming APIs were made stable, allowing the use of the same components with an updated visual style based on Material Design 3.

What is the new feature called 'event replay' in Angular?

Event replay is a feature that captures and replays events at the right time once the application is hydrated, ensuring that no user interactions with UI controls are lost during the hydration process.

What does Angular's enhanced dev tool support for hydration include?

The enhanced dev tool support for hydration includes the ability to visualize hydration information using Angular DevTools in the browser, with features like the show hydration overlays button and a breakdown of hydration errors in the components panel.

What is the significance of making Angular Material components compatible with hydration?

Making Angular Material components compatible with hydration allows developers to take advantage of the performance benefits of hydration in their applications, ensuring that these components are no longer skipped during the hydration process.

What is the future direction for Angular Material regarding theming?

The future direction for Angular Material regarding theming includes extracting more of the Angular Material behavior into fully customizable CDK components, providing even more flexibility for developers.

What incremental improvements are included in Angular V8 to enhance the developer experience?

Incremental improvements in Angular V8 include new APIs like signal inputs and model inputs for better data synchronization, signal query APIs for type-safe reactive interaction with content and view children, and support for the latest TypeScript features.

What is the 'zoness Angular' and why is it a goal for the Angular team?

Zoneless Angular refers to the effort to make Zone.js fully optional in Angular applications. The goal is to improve the developer experience by addressing the challenges that arise with Zone.js as applications scale and to prepare the framework for the next 10 years of web development.

What is the 'partial hydration' feature being worked on for Angular?

Partial hydration is a feature that allows developers to specify portions of their application that they would like to leave dehydrated. This provides more control over the hydration process and can improve the performance of the application.