What’s new in Angular v18
Summary
TLDRThe 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
🚀 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.
🔧 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.
🎨 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.
🛠️ 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.
Mindmap
Keywords
💡Angular
💡Developer Experience
💡Template Level Lazy Loading
💡Reactivity
💡Service Side Rendering and Hydration
💡Optional Zones
💡Angular Signals
💡Hybrid Change Detection
💡Material Design 3
💡Partial Hydration
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]
5.0 / 5 (0 votes)