Angular 14 arrives with typed forms, standalone components

Angular 14, the latest variation of the Google-designed, TypeScript-primarily based world wide web software framework, has arrived, showcasing typed kinds and a developer preview of standalone factors.

Standalone components simplify the progress of Angular purposes by lowering the need for NgModules. With standalone elements, directives, and pipes, the standalone: accurate flag permits builders to incorporate imports directly in a @component() without an @NgModule(). These factors must be made use of for exploration and growth only, as they are not a steady API and could improve outdoors of Angular’s standard model of backward compatibility.

Also in Angular 14, which was posted June 2, reactive kinds are strictly typed by default. Typed sorts ensure that values inside of of sorts controls, groups, and arrays are style harmless across the whole API surface, enabling safer kinds specially for deeply nested sophisticated scenarios. Update schematics let for incremental migration to typed types. Builders can little by little insert typing to present sorts with comprehensive backward compatibility. Also, ng udpate will swap all kind classes with untyped variations, allowing for builders to enable styles at their have rate.

To acquire benefit of the new typing assistance, the Angular development team advises seeking for occasions of the Untyped types controls and migrating to the new typed varieties API area wherever doable.

Angular 14 follows Angular 13, which arrived last November. Directions for acquiring established up in Angular can be uncovered at the challenge site. Other new features and enhancements in Angular 14 involve:

• Aid for the newest TypeScript 4.7 launch. Angular 14 targets ES2020 by default, enabling the CLI to ship smaller sized code with no need to have to down-amount.
• Safeguarded component associates can be bounded specifically from templates. This provides consumers additional control more than the general public API surface area of reusable parts.
• NgModel modifications are mirrored in the UI for OnPush parts.
• Optional injectors can be employed when building an embedded look at. The injector permits the dependency injection behavior to be custom made inside of the distinct template. Cleaner APIs are enabled for reusable elements and for element primitives in Angular CDK (Ingredient Dev Package).
• An experimental esbuild-primarily based develop method for ng establish is introduced, compiling to pure ECMAScript Module output.
• New solutions are offered for HarnessLoader to check out if a harness is current and return the harness instance if present.
• New modify detection and runtime optimization guides on angular.io.