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.

Outlines

00:00

🚀 Angular V8 Release and Future Enhancements

Mark from the Angular team introduces Angular V8 at Google's Bay View campus, highlighting its aim to improve the developer experience for all team sizes. The update brings features like template level lazy loading, improved reactivity with Angular Signals, service side rendering support, and more. The focus is on empowering developers to build scalable web apps. Alex Ricka, the technical lead, discusses the redesign of Angular's reactivity system, aiming to make Zone.js optional for Angular apps, ensuring backward compatibility while addressing performance and maintenance challenges. The introduction of new reactive primitives like Signal, Computed, and Effect in V16 and their stabilization in V17 is emphasized. Collaboration with state management libraries is underway to ensure compatibility and integration with the new reactivity model.

05:01

🔧 Hybrid Change Detection and Zone.js Optional Features in Angular V8

The script details the introduction of hybrid change detection in Angular V8, allowing developers to write code that functions regardless of Zone.js usage. An experimental API to run applications fully in a zone-less mode is also mentioned, although it's noted as experimental due to incomplete compatibility across all Angular features. Future plans include a full developer preview of zone-less Angular, updates to core framework components like forms and router to expose state signals, and the unlocking of full developer experience and performance benefits through signal components. Alan from the Angular team discusses server-side rendering and hydration updates in Angular, including enhanced DevTools support, hydration support for all Angular Material components, and event replay powered by JS to capture and replay events post-hydration.

10:04

🎨 Material Design 3 and Angular Version 18 Updates

Miles, an engineer on the Angular team, discusses the support for Material Design 3 in Angular version 18. The update stabilizes the recently added Material 3 theming APIs, allowing the use of familiar components with an updated visual style based on Material Design 3. The new features include simplified theme styles using CSS variables, more granular theme customizations, and a flexible API for applying color variants to components. Developers can create an M3 theme using Sass mixins and apply it alongside the existing M2 themes. The team also plans to extract more of the Angular Material behavior into fully customizable CDK components in the future.

15:06

🛠️ Developer Experience Improvements and Partial Hydration in Angular V8

Emma from the Angular team provides a roundup of additional new features in Angular V8, including new APIs to enhance the developer experience. The introduction of signal-based APIs, signal inputs, and model input APIs are highlighted, allowing for better data synchronization and type-safe reactive interaction with content and view children in templates. The new signal query APIs offer improved type safety and lazier updates. The experimental preview of zone-less Angular is also mentioned, with incremental improvements allowing developers to explore removing zones from their code. Other enhancements include support for the latest TypeScript features, a default value for NG content, and a global observable for Angular forms to track various control events. The script concludes with a tease about partial hydration support in Angular, allowing developers to specify portions of the application to remain dehydrated.

Keywords

💡Angular

Angular is a platform and framework for building client-side applications using HTML, TypeScript, and other languages. It is maintained by Google and is known for its robustness and scalability. In the video, Angular V8 is introduced, which signifies a new version of the framework with improved developer experience and performance enhancements.

💡Developer Experience

Developer Experience (DX) refers to the tools, practices, and methodologies that make it easier for developers to build software. In the context of the video, Angular V8 aims to improve the developer experience by introducing new features and updates that streamline the process of building web applications, such as template level lazy loading and improved reactivity.

💡Template Level Lazy Loading

Template Level Lazy Loading is a feature that allows parts of an Angular application to be loaded on demand rather than all at once. This can improve the performance of applications by reducing the initial load time. The video mentions the introduction of a new 'defer' syntax for this feature, which allows for more granular control over when templates are loaded.

💡Reactivity

Reactivity in Angular refers to the framework's ability to automatically update the UI in response to changes in application state. The video discusses improvements to reactivity with the introduction of Angular Signals, which provide a more ergonomic control flow and better performance as applications scale.

💡Service Side Rendering and Hydration

Service Side Rendering (SSR) is a technique where the server generates the HTML of a web application, which can improve performance and SEO. Hydration is the process of attaching the client-side logic to the server-rendered HTML. The video mentions support for SSR and hydration, indicating that Angular V8 provides tools to facilitate these processes.

💡Optional Zones

Zones are a mechanism in Angular that help with reactivity and change detection. In the video, the Angular team discusses making Zone JS optional, which means developers can choose to use it or not, depending on their needs. This is part of a redesign of Angular's reactivity system to improve performance and developer experience.

💡Angular Signals

Angular Signals are a new reactivity primitive introduced in Angular V16. They are used to track changes in application state and ensure that the UI updates correctly and efficiently. The video mentions that signals, along with computed and effect, are central to the new reactivity model in Angular.

💡Hybrid Change Detection

Hybrid Change Detection is a new mode for change detection in Angular V8 that allows the framework to listen to signals and other notifications about changes, even if Zone JS doesn't patch an API. This feature aims to balance correctness, performance, and developer experience, and it is a step towards making Zone JS optional.

💡Material Design 3

Material Design 3 (M3) is the latest iteration of Google's design language, which provides guidelines for visual, motion, and interaction design. In the video, it is mentioned that Angular Material 3 theming APIs are now stable, allowing developers to use Angular Material components with the updated visual style of M3.

💡Partial Hydration

Partial Hydration is a concept introduced in the video where developers can specify which parts of their application should remain dehydrated. This is an extension of the hydration feature in Angular, allowing for more granular control over the hydration process and potentially improving performance.

Highlights

Angular V8 release aims to improve developer experience for teams of all sizes.

New features include template level lazy loading with the new defer syntax.

Introduction of Angular Signals for improved reactivities.

Support for service side rendering and hydration added.

Optional Zones in Angular are being updated, aiming to make Zone JS optional for Angular applications.

Long-term investments in Angular's performance and developer experience include a redesign of Angular's reactivity system.

Backwards compatibility remains a priority with millions of Angular applications built with Zones.

New reactivity system aims to address challenges in maintaining performance and debugging reactivity at scale.

In V16, Angular introduced three new reactive Primitives: Signal, Computed, and Effect.

V17 made Signal and Computed stable APIs, preparing Angular for signals.

Collaboration with community state management libraries to support Signal API and integrations.

Hybrid change detection in V8 allows code to work regardless of whether Zone JS is used.

V8 will have an experimental API to run applications fully in zoneless mode.

Enhanced DevTools support for hydration in Angular, allowing developers to visualize hydration information.

Hydration support for all Angular Material components in version 18.

Event replay feature captures and replays events once the application is hydrated.

Support for Material Design 3 theming APIs in Angular version 18.

New Signal-based APIs in V8 for improved developer experience and optimized rendering updates.

Introduction of Signal inputs and model inputs for better data synchronization and two-way binding.

New Signal query APIs for type-safe reactive interaction with content and view children in templates.

Angular V8 includes experimental preview of zoneless Angular, making Zone JS fully optional.

Developers can now provide a default value for NG content, allowing placeholders for empty lists and components.

Angular Forms introduces a new Global observable to track changes around any abstract control and its children.

Partial hydration support is being worked on, allowing specification of portions of the application to remain dehydrated.

Transcripts

[Music]

hey everyone Mark here from the angular

team I'm Overjoyed to share that angular

V8 is here and it's going to improve the

developer experience for teams of all

sizes we're here at Google's Bay View

campus in Mountain View California and

we have so many Fantastic updates to

share that you definitely want to stick

around because things are about to get

awesome with each release we aim to

improve angular to better Ser the

developer Community as well as find ways

to move the web forward we've launched

features like template level lazy

loading with the new defer syntax more

ergonomic control flow improved

reactivities with angular signals

support for service side rendering and

hydration and so many more improvements

our goal has been and will continue to

be building a framework that empowers

developers to build robust web apps that

scale now today we'll be sharing details

about what we've launched in V8 and how

we're thinking about the future future

of angular speaking of future developers

have been asking for updates on optional

zones in angular but don't zone out just

yet we know you want updates so here's

one of our team leads Alex ricka with

the latest on optional zones in angular

Alex over to

you the team has been hard at work on

several long-term investments in both

the performance and developer experience

of angular one of the most vital

projects has been our redesign of

angular's reactivity system one of the

primary goals and one of the most

ambitious is to make Zone JS optional

for angular applications I'm Alex the

technical lead for the angular framework

at Google and I'm excited to share with

you some insight into our progress and

the work that

remains let's start by talking a little

bit about the goals why do we think

zoness angular is worth building and

what's the future of Zone js on angular

backwards compatibility is one of our

main values there are millions of

angular applications which are built

with zones including thousands at Google

alone and we're committed to supporting

this way of using angular for the

foreseeable future at the same time

experience has shown us that as

application scale the hands-off approach

to reactivity used by Zone JS starts to

show some weaknesses it becomes more

challenging to maintain and Safeguard

performance or to debug reactivity and

as new web apis are added the cost of

loading and initializing zones is

growing given these challenges we

decided to invest in a new reactivity

system that will scale to meet the

developer experience and performance

needs of the next 10 years of angular

applications changing a core part of the

framework like this is a long-term

project with features and fixes Landing

in different releases along the way

let's talk about some of the work we've

done already last year in V16 we

introduced angular developers to our

three new reactive Primitives signal

computed and effect these apis are at

the heart of our new reactivity model

with them developers can have confidence

that angular will understand changes

made to their application State and

update the UI correctly and efficiently

in v17 signal and computed became stable

apis angular is ready for signals in

addition to the core Primitives we've

been working closely with the teams

behind the Community State Management

libraries that you know and love like

ngrx ngxs RX angular and several others

we've been working together to ensure

the signal API support their use cases

and Integrations like nx's signal store

exemplify the fruits of this

collaboration these apis give us a

strong foundation on which to build a

new reactivity model for angular that

doesn't require zones when you

communicate State changes to angular for

example by setting a signal that's used

in a template the framework will

schedule change detection automatically

without the need for Zone JS but what

about existing applications some of

which can have thousands of components

which are not yet using signals we want

to make sure it's possible for these

applications to switch to zoness without

needing to migrate everything to signals

and of course we want the rich ecosystem

of angular libraries to be zoness

compatible without major changes as well

for the past 6 months we've been working

towards this goal building out a new

mode for change detection that balances

correctness performance developer

experience and backwards compatibility

getting this right takes time and we've

been working with different applications

at Google to experiment and test these

ideas some of which are already running

in production in V8 we expect to release

two major pieces of this puzzle one

piece is what we've been calling hybrid

change detection which will be enabling

by default for all V8 applications in

this mode even if Zone JS doesn't patch

an API or if changes are made outside of

the angular Zone angular will still list

listen to signals and other

notifications about changes and schedule

change detection hybrid change detection

will allow developers especially Library

authors to write code that works

regardless of whether Zone JS is used or

not and secondly in V8 will have an

experimental API to disable Zone JS

integration entirely and run

applications fully in zoness mode this

API will be experimental as not all

parts of angular work smoothly with

zoness today

we're still in the process of updating

libraries like forms and material for

example releasing this API early will

allow us to collect your feedback and

gather even more data on which patterns

are working with zonel less and where we

might need to focus more effort Beyond

V8 we have even more exciting projects

in the pipeline we'll be working towards

a full developer preview of zoness

including compatibility with angular's

own packages as well as popular

libraries in the ecosystem we're also

not finished integrating signals with

the core framework forms and router for

example will be updated to expose state

of signals where it makes sense and

finally signal components will unlock

the full developer experience and

performance benefits of signals through

our work on signals zon lists and across

our other projects we are committed to

the stability and reliability of angular

as a foundation for your applications

while we work to prepare the framework

for the next 10 years of web development

[Music]

I bet you all are in the zone after that

last update thanks Alex okay you know

what else is

important hydration and here to tell you

more about hydration in angular and the

latest on the angular server Side Story

is aine from the team go check that out

I have some lights to light up okay

let's go so many lights all the way to

the top by myself it's just

me I am Alan from the angular team and

I'm here to let you know what we've been

working on with server side rendering

and hydration in angular let's get

started angular continues to innovate

for its users by bringing modern

exciting updates to SSR in the framework

today is no exception in angular version

18 we are launching some great new

features the first is enhanced dep tool

support for hydration in angular now

developers can visualize hydration

information using angular death tools in

the browser with the show hydration

overlays button you can clearly see

which components are hydrated which were

skipped and which encountered an error

the components panel also shows a

breakdown of what went wrong it includes

hydration errors to more easily identify

how to fix them we think you really

enjoy this new feature we are also happy

to announce hydration support for all

angular material components you can now

take advantage of performance benefits

of hydration in your applications that

use angular material components these

components will no longer be skipped

during hydration we have an update on a

much requested feature in version 18 we

are adding hydration support for i8m

blocks this feature is in developer

preview before I tell you more about

what's coming in the future there's one

more feature I want to announce before

an application is hydrated users May

interact with UI controls and as a

developer you don't want to lose those

events well as part of our ongoing

collaboration with the WIS team at

Google we are announcing event replay

powered by JS

section events will be captured and

replayed at the right time once the

application is hydrated event replay is

now available in developer preview

here's a glance at what we are working

on next we are working on providing

outof the Box support for selecting a

rendering mode for a given route this

means providing an easy hook for

choosing which routes are rendered

client side server side or at whe time

we are also working on improving the SSG

experience for parameterized

routes all right that's it for me but

there's so much more to learn about in

the latest release of angular so check

out the angular YouTube channel for more

on what's in store now go and your

update thanks for those updates Salon

the angular server Side Story just

continues to evolve and you the

developer Community continue to receive

the benefits now would you like to know

more about angular material 3 I bet you

would so Miles why don't you let the

people know what we've been working

on the moment you've been waiting for is

here angular now has support for

material 3 my name is Miles and I'm an

engineer on the angular team let's learn

more about the latest changes for

angular material in angular version 18

we're making the recently added material

3 theming apis stable these apis allow

you to use the same components you know

and love with an updated visual style

based on material design 3 here are some

of the new features that are available

with our M3 themes simplified theme

Styles based entirely on CSS variables

that don't add selector specificity more

granular theme customizations based on

CSS variables and a more flexible API

for applying color variants to

components

to use material 3 in your app create an

M3 theme in SAS using matt. Define theme

or generate a theme using NG generate

then pass the new theme to the same

angular material SAS mixins you're

already using to apply your M2 theme

along with the great features I've

already talked about we also offer SAS

apis to read colors typography and other

properties from the M3 theme so that you

can write your own custom components

that work with M3 themes while we're

excited to provide this new option for

theming your components we also want to

emphasize that our M2 themes will

continue to be available alongside our

M3 themes we hope that these changes

open up more possibilities for you to

customize angular material components to

meet your needs for those who need even

more flexibility we're looking forward

to extracting more of the angular

material Behavior into fully

customizable cdk components in the near

future thanks for watching and see you

next

time our materi 3 support will only

continue to grow enabling you and your

teams to build fantastic uis for your

applications to best serve your users

the angular V8 release is filled with so

many features that we will be here all

day if we try to cover them all but

instead let's head over to our very own

emori for a quick Roundup of more new

features that you can get started using

today angular V8 is here and besides the

big updates there are a lot of great

little features bug fixes and

incremental improvements to help you and

your teams build the next generation of

web apps Emma here from the angular team

and I'm going to tell you about the

great features launched in this release

let's do

this angular V8 is shipping with new

apis to further improve the developer

experience in the framework first up are

our new signal-based

apis in v77 we introduced angular

signals A system that granularly tracks

how and where your state is used

throughout an application allowing the

framework to optimize rendering

updates now we're on a path to fully

signal-based components and this release

contains some of the building blocks

developers will need to make that

happen first we're introducing signal

inputs signal inputs allow values to be

bound from a parent component those

values are exposed using a signal and

can change during the life cycle of your

component to help developers have a

better time keeping data in sync with

two-way binding there's the new model

input

API model inputs are a special type of

input that enable a component to

propagate new values back to another

component when creating a component you

can define a model input similarly to

how you create a standard input both

types of inputs allow someone to bind a

value into the property however model

inputs allow the component author to

write values into the property in other

respects you can use model inputs the

same way you use standard inputs we know

that developers have long wanted a

type-safe reactive way to interact with

content children and view children in

templates we heard you loud and clear

and that's why we've built the new

signal query apis

the new approach exposes query results

as signals which mean that query results

can be composed with other signals using

computed or effect and drive change

detection Additionally the signal-based

query system offers other benefits like

more predictable timing simpler API

surface improved type safety more

accurate type inference and lazier

updates the underlying query mechanism

doesn't change much concep usually

angular still creates singular child or

plural children queries that Target

elements in a template or content the

difference is in the type of result and

the exact timing of the result

availability these features bring V8

closer to our goal of signal-based

components but we're not stopping there

as Alex shared V8 includes an

experimental preview of zoness angular

he did a great job sharing how we're

thinking about the future developer

experience of zoness angular and why our

eventual goal is to make Zone JS fully

optional but we know that you want to

see some code V8 includes some

incremental improvements that allow you

to explore removing zones in your code

starting

today zones event cesing is on by

default in V8 and Zone cesing uses the

same scheduler as

zoness angular with Zone JS can be

configured to schedule change detection

even when the changes happen outside the

angular Zone this takes advantage of the

zoness scheduler in existing Zone JS

apps and angular material components in

the cdk are zoness

compatible zoness is available as

experimental in V8 to learn more about

experimental zonel list support head to

our guides on angular

dode but that's not it here are some

quick hits that are sure to make

developing in angular better developers

can enjoy the latest features of

typescript 5.4 in your

applications update now for preserved

narrowing enclosures Following last

assignments the no INF for utility type

and a lot more you can learn more about

what these all mean in Microsoft's blog

post announcing typescript

5.4 also new developers can now provide

a default value for NG content this

allows you to have a placeholder for

empty lists and other components with no

current content and what's that we've

closed our number one most upvoted

feature request on GitHub angular forms

introduced a new Global observable you

can subscribe to to track changes around

any abstract control and its children

you can now track all kinds of events

like touched dirty Etc in addition to

value and Status all through a single

observable you know what's even cooler

most of these feature ads actually

happened in a minor lease leading up to

today that means you don't have to wait

6 months for the next enhancement to

your signal apis another step towards

zoness or one of your top voted issues

being resolved we've been talking a lot

about the future of angular and you can

find out more about what we've been

working on by heading over to our public

road map at

[Music]

fantastic tool for building web

applications that scale with confidence

with all of the new features announced

in angular V8 developers have all the

tools they need to build the next great

web

application oh oh I think I got it I got

it I got it I'm I mean of course I got

it of course I got it Jessica here

assuming direct control over this stream

to tell you about two more quick things

number one all those puns from Mark in

the script they were me all

along

sorry at number two I have one more

feature to tell you about with all the

success of hydration we thought maybe we

could take things partially a bit

further that's right we're working on

partial hydration support in

angular the goal of this is to allow you

to very quickly easily intuitively and

declaratively specify portions of your

application that you'd like to leave

dehydrated just like we did with defer

views and the best part about all this

is is we're going to be releasing it as

part of oh crap I think we oh crap I'm

no I'm losing the

connection she is always doing stuff

it's my show all right friends whatever

you just heard ignore all of that but

hey thanks so much for coming to our

special angular event we hope you

enjoyed yourself but hey let us know

what you think be sure to NG update and

as always go build great apps we see you

the next

time wait you all are still here got to

get out of here I got to go home bye get

out of here bye thanks for coming bye

[Music]