Paul Krill
Editor at Large

Angular 14 arrives with typed forms, standalone components

news
Jun 6, 20222 mins

Standalone components promise to streamline the development of Angular apps by reducing the need for NgModules.

Angular 2 primary
Credit: Thinkstock

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.
Paul Krill

Paul Krill is editor at large at InfoWorld. Paul has been covering computer technology as a news and feature reporter for more than 35 years, including 30 years at InfoWorld. He has specialized in coverage of software development tools and technologies since the 1990s, and he continues to lead InfoWorld’s news coverage of software development platforms including Java and .NET and programming languages including JavaScript, TypeScript, PHP, Python, Ruby, Rust, and Go. Long trusted as a reporter who prioritizes accuracy, integrity, and the best interests of readers, Paul is sought out by technology companies and industry organizations who want to reach InfoWorld’s audience of software developers and other information technology professionals. Paul has won a “Best Technology News Coverage” award from IDG.

More from this author