More updates from Angular v18
Summary
TLDRAngular v18 introduces a suite of enhancements aimed at refining web app development. It brings new signal-based APIs, including Signal Inputs and Model Input API, for optimized data binding and two-way synchronization. The release also features Signal Query APIs for reactive, type-safe interactions with content and view children. An experimental preview of Zoneless Angular is included, aiming to make Zone.js optional. Other improvements include TypeScript 5.4 support, default values for ng-content, and a new global observable for Angular Forms. These updates are part of Angular's ongoing commitment to incremental advancements in developer experience.
Takeaways
- đ Angular v18 has been released with new APIs and features to enhance the development of web applications.
- đ Introduction of Signal Inputs allows for binding values from a parent component using signals, enabling lifecycle changes.
- đ The new Model Input API facilitates two-way data binding, allowing components to propagate new values back to their parents.
- đ Signal Query APIs provide a typesafe, reactive way to interact with ContentChildren and ViewChildren, offering improved type safety and lazier updates.
- đ Zoneless Angular is now available as an experimental feature, aiming to make Zone.js fully optional for developers.
- đ Incremental improvements in v18 allow developers to explore removing zones from their code, with eventCoalescing on by default for better scheduling.
- đ TypeScript 5.4 features are now available in Angular applications, including preserved narrowing and the NoInfer utility type.
- đ Developers can provide a default value for ng-content, offering a placeholder for empty lists and components without content.
- đž Angular Forms introduces a new global observable for tracking changes across any abstract control and its children, including events like touched and dirty.
- đ Most of these new features were introduced in minor releases, meaning developers don't have to wait for major releases to benefit from enhancements.
- đ The Angular team is actively working on the future of the framework, with more information available on their public roadmap.
Q & A
What is the main topic of the video script provided?
-The main topic of the video script is the release of Angular v18 and its new features, bug fixes, and incremental improvements for building web applications.
What are the new APIs introduced in Angular v18 to improve the developer experience?
-Angular v18 introduces new signal-based APIs, including Signal Inputs, Model Input API, and Signal Query APIs to enhance the developer experience.
How do Signal Inputs work in Angular v18?
-Signal Inputs in Angular v18 allow values to be bound from a parent component and are exposed using a signal, enabling them to change during the lifecycle of the component.
What is the purpose of the Model Input API in Angular v18?
-The Model Input API in Angular v18 enables a component to propagate new values back to another component, providing a typesafe, reactive way to interact with data.
How do Signal Query APIs differ from the previous approach for querying ContentChildren and ViewChildren?
-Signal Query APIs expose query results as signals, allowing them to be composed with other signals and drive change detection, offering benefits like predictable timing, simpler API, improved type safety, and lazier updates.
What is the significance of the experimental preview of Zoneless Angular in v18?
-The experimental preview of Zoneless Angular in v18 is a step towards making Zone.js fully optional, improving the developer experience by allowing Angular to function without relying on Zone.js for change detection.
What improvements does Angular v18 offer for developers using TypeScript 5.4 features?
-Angular v18 allows developers to enjoy the latest features of TypeScript 5.4, including preserved narrowing, enclosures following last assignments, the NoInfer utility type, and more.
What is the new feature in Angular v18 that allows developers to provide a default value for ng-content?
-In Angular v18, developers can now provide a default value for ng-content, enabling placeholders for empty lists and components with no current content.
How does the new global observable introduced in Angular Forms help developers track changes?
-The new global observable in Angular Forms allows developers to subscribe to track changes around any abstract control and its children, including events like touched, dirty, etc., in addition to value and status, all through a single observable.
What does the Angular team emphasize regarding the frequency of updates and enhancements?
-The Angular team emphasizes that most of the new features and enhancements have been introduced in minor releases leading up to v18, meaning developers do not have to wait for major releases to receive updates.
How can developers stay informed about the future of Angular and its ongoing developments?
-Developers can stay informed about the future of Angular and its ongoing developments by visiting the public roadmap at angular.dev/roadmap and checking the full changelog on GitHub for each feature, fix, and enhancement in v18.
Outlines
đ Angular v18: New Features and APIs
Emma Twersky introduces Angular v18, highlighting its new APIs and features aimed at enhancing the developer experience. The release includes signal-based APIs, which were introduced in v17, to optimize rendering updates. New additions are Signal Inputs for binding values from a parent component, the Model Input API for two-way data binding, and the Signal Query APIs for type-safe reactive interactions with ContentChildren and ViewChildren. These APIs allow for more predictable timing, simpler API usage, improved type safety, and lazier updates. The paragraph also mentions an experimental preview of Zoneless Angular, aiming to make Zone.js optional, and the benefits of the Zoneless Scheduler in existing apps. Angular Material components and the CDK are now zoneless-compatible.
đ§ Angular v18: Incremental Improvements and TypeScript 5.4
The script continues to detail incremental improvements in Angular v18, such as the ability to use TypeScript 5.4 features within applications, including preserved narrowing, enclosures following last assignments, and the NoInfer utility type. Developers can now provide a default value for ng-content, offering a placeholder for empty lists and components without content. Additionally, Angular Forms introduces a new global observable to track various events like touched, dirty, and status changes, in addition to value changes, through a single observable. The paragraph emphasizes that many of these features were implemented in minor releases, allowing for more frequent updates without waiting for major releases. It encourages users to check the public roadmap and GitHub changelog for more information on ongoing developments and updates.
Mindmap
Keywords
đĄAngular v18
đĄSignal-based APIs
đĄSignal Inputs
đĄModel Input API
đĄSignal Query APIs
đĄZoneless Angular
đĄTypeScript 5.4
đĄng-content
đĄAngular Forms
đĄng-update
đĄGitHub
Highlights
Angular v18 introduces new APIs to improve the developer experience.
New signal-based APIs are included for optimized rendering updates.
Signal Inputs allow parent component values to be bound and change over the component's lifecycle.
Model Input API enables components to propagate new values back to another component.
Model Inputs are defined similarly to Standard Inputs but allow writing values into the property.
Signal Query APIs provide a typesafe, reactive way to interact with ContentChildren and ViewChildren in templates.
Signal-based query system offers benefits like predictable timing, simpler API, improved type safety, and lazier updates.
The underlying query mechanism remains largely unchanged, but the result type and timing have been refined.
Zoneless Angular is introduced as an experimental preview, aiming to make Zone.js fully optional.
v18 includes incremental improvements for exploring the removal of zones in code.
Event coalescing is enabled by default in v18, using the same scheduler as Zoneless Angular.
Angular Material components and the CDK are now zoneless-compatible.
Developers can enjoy the latest features of TypeScript 5.4 in their Angular applications.
A default value can now be provided for ng-content, offering placeholders for empty components.
Angular Forms introduces a new global observable for tracking various control events through a single observable.
Most of these features were introduced in minor releases, allowing for quicker enhancements and fixes.
Angular's public roadmap provides insights into the ongoing development and future plans.
ng-update and the GitHub changelog offer comprehensive details on features, fixes, and enhancements in v18.
Transcripts
EMMA TWERSKY: Angular v18 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.
[MUSIC PLAYING]
Angular v18 is shipping with new APIs
to further improve the developer experience in the framework.
First up are our new signal-based APIs.
In v17, 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 lifecycle 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 typesafe, reactive way to interact with ContentChildren
and ViewChildren 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.
Conceptually, 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 v18 closer to our goal
of signal-based components, but we're not stopping there.
As Alex shared, v18 includes an experimental preview
of Zoneless Angular.
He did a great job sharing how we're
thinking about the future developer experience of Zoneless
Angular and why our eventual goal is
to make Zone.js fully optional.
But we know that you want to see some code.
v18 includes some incremental improvements
that allow you to explore removing zones in your code
starting today.
Zone's eventCoalescing is on by default in v18,
and zoneCoalescing uses the same scheduler as Zoneless.
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 Zoneless Scheduler
in existing Zone.js apps.
And Angular Material components and the CDK
are zoneless-compatible.
Zoneless is available as experimental in v18.
To learn more about experimental Zoneless
support, head to our guides on angular.dev.
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 NoInfer 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, et
cetera, in addition to value and status,
all through a single observable.
You know what's even cooler?
Most of these featurettes actually
happened in a minor release leading up to today.
That means you don't have to wait
six months for the next enhancement to your Signal APIs,
another step towards Zoneless, 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 roadmap at angular.dev/roadmap.
Be sure to ng-update and check out our full changelog
on GitHub for each and every feature, fix,
and enhancement in v18.
[MUSIC PLAYING]
5.0 / 5 (0 votes)