Skip to content

New Features in Angular 14 - Standalone APIs, Animations, SSR Support, Typed Forms, TypeScript 4.7 and more

The release of Angular 14 was just announced on June 2, 2022, and offers many exciting new features including Typed Forms, Standalone Components, Typescript 4.7 support, and more.

Here’s a first look at some of the new features.

Standalone APIs

The Standalone Pipes, Directives, and Components feature (Standalone PDC) is still in the preview stage, and is subject to change in the near future. However, it is now ready to be used in production applications.

The Standalone APIs make NgModule optional for Components, Directives, and Pipes. Developers can use the new load Component #45705 to lazyLoad a route for a Standalone component without the need to implement NgModule.

Developers can also implement dependencies and providers directly into the component #45673.

Some of the benefits of Standalone PDC include:

  • Less boilerplate code. Implementing a Component, Pipes, or a Directive will only require the actual code for the feature without the need to add NgModules.

Easier to learn for new developers, as it will require only the process that implements the features.

  • Less code in a project means a smaller bundle size for deployment.
  • Ability to independently lazy load a single component.
  • Ability to independently add NgModules and functionalities to a component, directive, or pipes.

GitHub Link to feature implementation #45687 #45672

Typed Forms

Strongly-typed forms are a popular request by the community #13721. With Angular 14, the new Form API provides type-safe and null-safe form controls and form values. It ensures that the values inside of form controls, groups, and arrays are type-safe. #43834

nonNullable Form Controls

With typed-forms, form controls are null by default, and can be reset to null. The FormBuilder.nonNullable allows a provided default value to form reset. When calling formControl.reset() form controls will be reset to the default value. #45852

Configurable Document Page Title

Angular 14 provides a new service for setting the document page title. With this, developers can provide configuration for page Title using the new Router.title property in Angular Router, allowing a developer to implement a page title without the need to import title.

const routes: Routes = [{ path: 'home', component: HomeComponent title: 'My App - Home' // <-- Page title }, { path: 'about', component: AboutComponent, title: 'My App - About Me' // <-- Page title }];

#43307

Specifying Providers for a Route

Inspired by the Angular 14’s Standalone PDC, the ability to lazyLoad a component, or add an independent NgModule to the component, allows developers to specify Providers for a Route without having to add it to an NgModule. Instead, they can add it directly to a component. #45673

Node and Typescript Versions support

Angular 14 only supports Node 14> #45286 and Typescript 4.6> #45394. Any technologies behind these versions are not supported.

Angular Animation

With Angular 14, developers now get a warning when trying to animate a non-animatable CSS property. #45212

Creating UrlTree from Routes

With Angular v14.1, developers can create a UrlTree from any ActivatedRouteSnapshot. A UrlTree is a data structure that provides a lot of ways to deal with URLs like accessing URL fragments, query params, and more. The previous Router APIs only support creating UrlTrees from an ActivatedRoute.

The benefits of this function can be observed when the developer only needs URL information of a component at a particular state. #45877

Standalone API support for SSR

Angular 14 exposes new functionality. renderApplication, which is similar to renderModule, is used for Angular server-side rendering to allow application bootstrapping. This accepts a standalone component instead of a root NgModule. #457850

New Angular CLI Commands

ng cache

Angular CLI's new command ng cache can be used to check and control the disk cache settings. This accesses the existing configuration in ng config. #22851

ng completion

Making typos with ng commands happens to a lot of us. With the new ng completion, developers can enable the real-time type-ahead autocomplete feature of Angular CLI. This command generates a script that developers can copy and paste into .bashrc, .bash_profile, .zshrc or .zsh_profile. #22967

To learn more about Features, fixes, and deprecates of Angular API, visit the official ChangeLog Doc.


*This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdot.co.

You might also like

Angular

Internationalization (I18N) in Angular with Transloco

Angular

Angular v10 released!

Angular

Make it Accessible: Better Layout with HTML

Angular

Make it Accessible: Accessible Alphabet Board with Angular and RxJs