More updates from Angular v18

Summary

Angular 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

00:00

🚀 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.

05:01

🔧 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.

Keywords

💡Angular v18

Angular v18 refers to the latest major version of the Angular framework, a platform for building dynamic web applications. In the video, it is the central topic as it introduces new features, improvements, and bug fixes that enhance the developer experience and the capabilities of web apps. The script highlights Angular v18's new APIs and its journey towards signal-based components.

💡Signal-based APIs

Signal-based APIs in Angular v18 are a set of features designed to improve the developer experience by allowing more granular tracking of state usage throughout an application. They enable the framework to optimize rendering updates. The script mentions the introduction of Signal Inputs and Model Input API as part of these APIs, which are crucial for the development of signal-based components.

💡Signal Inputs

Signal Inputs are a new feature in Angular v18 that allows values to be bound from a parent component and exposed using a signal. This means that the values can change dynamically during the component's lifecycle, providing a reactive way to handle data changes. The script illustrates this by explaining how developers can bind values and have them change reactively.

💡Model Input API

The Model Input API is introduced as a special type of input in Angular v18 that enables components to propagate new values back to another component. It is similar to Standard Inputs but allows the component author to write values into the property. This API is significant for two-way data binding and keeping data in sync, as demonstrated in the script.

💡Signal Query APIs

Signal Query APIs are a new approach in Angular v18 that exposes query results as signals. This allows developers to interact with ContentChildren and ViewChildren in a typesafe and reactive manner within templates. The script explains that these APIs enable query results to be composed with other signals, driving change detection and offering improved type safety and lazier updates.

💡Zoneless Angular

Zoneless Angular is an experimental feature in Angular v18 that aims to make the use of Zone.js fully optional, improving the developer experience by allowing change detection to be scheduled even when changes happen outside the Angular Zone. The script discusses the future of Angular without Zones and how Angular Material components and the CDK are compatible with this approach.

💡TypeScript 5.4

TypeScript 5.4 is the latest version of TypeScript mentioned in the script, which is a superset of JavaScript that adds static types. Angular v18 supports the latest features of TypeScript 5.4, allowing developers to take advantage of new language features such as preserved narrowing, enclosures following last assignments, and the NoInfer utility type.

💡ng-content

ng-content is a directive in Angular used for projecting external content into a component's view. The script mentions a new feature in Angular v18 that allows developers to provide a default value for ng-content, enabling placeholders for empty lists or components with no current content.

💡Angular Forms

Angular Forms is a module in Angular that provides a set of abstractions for handling forms in Angular applications. The script highlights a new global observable introduced in Angular Forms that allows developers to track changes around any abstract control and its children, providing a unified way to monitor various form events.

💡ng-update

ng-update is a command-line utility in Angular that helps developers update their applications to the latest version of Angular. The script encourages developers to use ng-update to take advantage of the new features, fixes, and enhancements in Angular v18.

💡GitHub

GitHub is a platform for version control and collaboration that is widely used by developers. In the context of the script, GitHub is mentioned as the place where developers can find the full changelog for Angular v18, detailing every feature, fix, and enhancement included in the release.

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]