Angular 18 is EXACTLY what we needed

Summary

Angular 18 introduces a plethora of updates, enhancing the framework's capabilities. Key features include stable support for new control flow syntax and deferable views, along with a suite of signal-related functionalities that were previously in minor Angular 17 versions. The update also reduces reliance on decorators with new functions for inputs, outputs, and queries. A significant addition is the experimental feature to eliminate zone.js, leading to a more fine-grained change detection and potentially smaller bundle sizes. Angular 18 also brings minor improvements and quality of life enhancements, ensuring backward compatibility and maintaining Angular's reputation as a stable and evolving framework.

Takeaways

• 🚀 Angular 18 was released with many new features and updates.
• 🔄 Angular 18 completes developments that started in previous versions.
• 🆕 The new control flow syntax for if and for statements is now stable.
• 🛠️ Deferable views, which allow lazy loading parts of templates, are also stable.
• 💡 Angular 18 includes several new signal-related features, such as signal-based inputs and outputs.
• 🔍 New viewChild and contentChild functions enable querying elements without decorators.
• ♻️ The new model function simplifies setting up two-way binding on custom components.
• 🚫 Zone.js can now be removed experimentally, potentially improving performance and reducing bundle size.
• 🛠️ Minor new features and quality of life improvements include fallback content for ng-content and easier redirects in guards.
• 📈 Updating to Angular 18 is straightforward and backward compatible, continuing Angular's tradition of stability and compatibility.

Q & A

What is the main theme of Angular 18 according to the video?

Angular 18 completes many developments that started in the past couple of weeks, months, and even years, marking new features as stable and introducing signal-related features.

What new control flow syntax was introduced in Angular 17 and is now stable in Angular 18?

The new if and for statements for templates were introduced in Angular 17 and are now marked as stable in Angular 18.

What is the purpose of deferable views in Angular 18?

Deferable views allow for lazy loading parts of your templates based on different triggers, enhancing performance by loading content only when needed.

How does Angular 18 improve component inputs with signal-related features?

Angular 18 introduces signal-based inputs, allowing developers to set up component inputs as reactive signals, simplifying the process of subscribing to changes.

What is the new output function in Angular 18 and why was it added?

The new output function in Angular 18 allows for creating outputs without a decorator, aiming to balance the syntax by avoiding the use of decorators for inputs but not for outputs.

How have the viewChild and contentChild queries been simplified in Angular 18?

In Angular 18, viewChild and contentChild queries can now be set up without using decorators, using new functions that provide a signal wrapping the queried element, making them reactive.

What is the significance of the new model function in Angular 18?

The new model function in Angular 18 simplifies the setup of two-way bindable properties on custom components, leveraging signals to make the process more straightforward.

What experimental feature in Angular 18 allows for the removal of zone.js?

An experimental feature in Angular 18 allows developers to get rid of zone.js by calling a special function and modifying the Angular JSON file, leading to finer-grained change detection.

How does the removal of zone.js in Angular 18 impact the project's bundle size and performance?

Removing zone.js reduces the project's bundle size since the library is no longer included, and it may improve performance by eliminating the all-covering watcher that triggers change detection.

What minor features and quality of life improvements were added in Angular 18?

Minor features and improvements in Angular 18 include the ability to define fallback content with ng-content, easier redirecting inside guards, and various fixes and enhancements to Angular dev tools.

How can developers update their projects to Angular 18 and ensure backward compatibility?

Developers can use the ng-update command provided by the Angular CLI to update their projects to Angular 18, ensuring backward compatibility as all features are added in a compatible manner.

What are some future directions for Angular hinted at in the video?

The future directions for Angular include reducing the use of decorators, exploring new component authoring formats, considering making RxJS optional, and introducing features to simplify Angular syntax.