The Angular team has released version 18 of this Google-sponsored TypeScript framework, including a core library also used by Google Search, following the amalgamation of Angular with an internal framework called Wiz.
Highlights identified by the Angular product lead Minko Gechev include stable APIs for the Material 3 design system components, and also for deferable views and control flow, previously in developer preview.
Deferable views, blocks marked with @defer, reduce page load time by loading them after the initial page load. Optional blocks marked with @placeholder and @loading shows interim content, so for example a slow-loading component can have immediate placeholder content, and then a loading indicator to show users that the content is on the way.
Control flow lets developers conditionally show, hide or repeat elements with @if, @for and @switch, replacing earlier Angular directives ngIf, ngFor and ngSwitch. The new directives are better optimized, alongside other advantages. “With NgFor, loops over immutable data without trackBy are the most common cause of performance bugs across Angular applications,” states the documentation.
Although Angular is well-known as Google’s JavaScript/TypeScript framework, the company also has an internal framework called Wiz, used for many years to power Google products including Search, Photos and Payments. Wiz focused on performance, whereas Angular was used for more complex UIs (user interfaces). In March Google said that the two frameworks will be merged, though this is a gradual strategy.
One outcome is the appearance of a feature called event dispatch, based on a Wiz library jsaction. The use case for this is where a page loads with interactive elements such as buttons, with the user interface rendered before the JavaScript event handlers have been attached. Event dispatch captures the user’s clicks so that instead of being lost (since the full page is not yet loaded), they are recorded and replayed after full page load. This feature is in developer preview.
The team has also worked on the Angular tools and documentation. Documentation now lives at a new site called angular.dev, which also includes an interactive playground and tutorial using StackBlitz WebContainers.
Hydration is the process whereby server-side rendered content is loaded in the client without flicker by reusing the existing DOM (Document Object Model). In Angular 18, hydration is fully supported by Material 3 components, some of which previously did not support it. There are also plans for partial or incremental hydration, using a similar approach to deferable views, with some work on this already being prototyped. Angular DevTools, a Chrome extension, now includes visualization of hydration.
Gechev refers to the “Angular renaissance,” reflecting the idea that Angular is making a comeback after declining in use following the friction of AngularJS being rewritten as Angular 2 with huge changes, and the popularity of React and React-based frameworks.
The extent of the renaissance is open to question but it remains widely used and with Google’s internal usage and sponsorship continues to evolve at a rapid pace.