Angular 14 arrives with typed forms, standalone components

Angular 14, the latest version of the Google-developed, TypeScript-based web application framework, has arrived, featuring typed forms and a developer preview of standalone components.

Standalone components simplify the development of Angular applications by reducing the need for NgModules. With standalone components, directives, and pipes, the standalone: true flag allows developers to add imports directly in a @component() without an @NgModule(). These components should be used for exploration and development only, as they are not a stable API and could change outside of Angular’s typical model of backward compatibility.

Also in Angular 14, which was published June 2, reactive forms are strictly typed by default. Typed forms ensure that values inside of forms controls, groups, and arrays are type safe across the full API surface, enabling safer forms particularly for deeply nested complex cases. Update schematics allow for incremental migration to typed forms. Developers can gradually add typing to existing forms with full backward compatibility. Also, ng udpate will replace all form classes with untyped versions, allowing developers to enable types at their own pace.

To take advantage of the new typing support, the Angular development team advises searching for instances of the Untyped forms controls and migrating to the new typed forms API surface where doable.

Angular 14 follows Angular 13, which arrived last November. Instructions for getting set up in Angular can be found at the project website. Other new features and improvements in Angular 14 include:

• Support for the latest TypeScript 4.7 release. Angular 14 targets ES2020 by default, allowing the CLI to ship smaller code with no need to down-level.
• Protected component members can be bounded directly from templates. This gives users more control over the public API surface of reusable components.
• NgModel changes are reflected in the UI for OnPush components.
• Optional injectors can be used when creating an embedded view. The injector allows the dependency injection behavior to be customized within the specific template. Cleaner APIs are enabled for reusable components and for component primitives in Angular CDK (Component Dev Kit).
• An experimental esbuild-based build system for ng build is introduced, compiling to pure ECMAScript Module output.
• New methods are offered for HarnessLoader to check if a harness is present and return the harness instance if present.
• New change detection and runtime optimization guides on angular.io.