What’s Wrong With the Angular 18 Update?

On Wednesday, May 22, 2024, the Angular core team unveiled the latest iteration of their framework: Angular version 18.

Angular 18 just landed, and let me tell you, it’s awesome!

This update is all about making your life as an Angular developer easier and faster. No glitches here, just pure awesomeness.

Here’s what you can expect:

• Blazing-fast performance with zoneless change detection.
• Easier debugging with improved signal tools.
• Routing that bends to your will with function-based redirects.
• Smoother data flow thanks to the new input function.
• Firebase app hosting for effortless deployment.
• Enhanced server-side rendering for a seamless user experience.
• And more! We’re talking fancy new form control state change events too.

Get ready to build incredible things with Angular 18! Let’s explore these features in detail.

Stable Control Flow Syntax in Angular

The latest Angular release features a new, stable way to manage view flow, integrated into the Angular template compiler. This makes structural directives like ngIf, ngFor, and ngSwitch optional.

Migration and Benefits

The new syntax is now stable, and adoption is recommended. To migrate your application, you can use a specific schematics command provided by Angular.

New @for Syntax

The new @for syntax replaces ngFor and requires the use of the track option to optimize list rendering and avoid unnecessary recreations.

Development Mode Warnings

1. Duplicate Tracking Key Warning: This warning appears if the tracking key in your collection is not unique.
2. Costly Tracking Key Warning: This warning is shown if the tracking key results in the complete destruction and recreation of the list, indicating a potentially expensive operation.

Defer Syntax is Now Stable

The new @defer syntax in Angular allows you to define a block for lazy loading when a specific condition is met. Any third-party directive, pipe, or library used in this block will also be lazy-loaded.

Key features include:

• @placeholder: Displayed until the @defer block condition is met.
• @loading: Shown during the download of the @defer block if it takes more than 100ms, with a minimum display time of 1 second.
• @error: Displayed if an error occurs while downloading the @defer block.

What Will Happen To Zone Js

Angular 18 changes how detection change is triggered, moving away from Zone Js to a new scheduler within the framework itself. This scheduler handles events like template or host listener triggers, view attachments or deletions, async pipe updates, markForCheck calls, and signal value changes. This shift was prompted by the use of ApplicationRef.tick internally. Migration to Angular 18 should be seamless, but to revert to the old behavior, you can use provideZoneChangeDetection with ignoreChangesOutsideZone set to true. Additionally, for Zone Js independence, provideExperimentalZonelessChangeDetection can be implemented, allowing for removal of Zone Js dependency from the project’s dependencies and polyfills in angular.json.

Keep reading here: https://bit.ly/3wSzcvd