What is new in Angular 14?

The two major features of Angular 14 are:

• Standalone Components.
• Typed Angular Forms.

Standalone Components.

With the introduction of Angular 14, standalone components will definitely be a good option, and Angular modules will no longer be required. A standalone component can be depended upon directly, without the NgModule. It also directly handles its dependencies.

Major Points:

The value of the flag “standalone” in a standalone component must be set to true.

Adding the standalone component to ngModule is unnecessary.

The required modules can be imported directly into the component.

Command :

ng g c firststandalone --standalone 

Code Snippet:

Resources and Code (on GitHub)

Standalone Component with router service:

Code snippet:

Main.ts file: bootstrapApplication will be modified, Routermodule is added to the providers. ImportProvidersFrom can also be used to set up the router:

Standalone Component without router service:

This type of standalone component will not allow routing to the other component.

Code snippet:

Full code: https://github.com/sensationalkunlex/standalone-without-router

There are limitations to standalone component:

With the new bootstrapApplication() function, You can’t bootstrap multiple component at once.

Typed Angular Forms.

The values contained in form controls, groups, and arrays are type-safe over the full API surface thanks to typed forms. This makes forms safer, especially for complex cases with deep nesting.

TypeForm Advantages:

1. Code auto-completion enabled automatically.

2. Type checking: we get useful compiler error messages out of the box.

FormRecord (New)

The API now includes a brand-new form entity which is similar to the FormGroup. A FormRecord requires that each control be of the same type. It can be useful if you want to depict a list of checkboxes, for instance, where the user can add or remove items.

Code Snippet

Updating your existing project to Angular 14:

With the help of Angular Schematics(Update), all form classes will be replaced with untyped equivalents using the ng update command (FormGroup becomes UntypedFormGroup and FormControl becomes UntypedFormControl ). You can gradually add types to your current forms while maintaining complete backwards compatibility.

Github Repo https://github.com/sensationalkunlex/angular-typeform

References

• https://angular.io/guide/typed-forms
• https://angular.io/api/platform-browser/bootstrapApplication
• https://update.angular.io
• https://blog.angular.io/angular-v14-is-now-available-391a6db736af
• https://blog.ninja-squad.com/2022/05/12/a-guide-to-standalone-components-in-angular/#caveats

By

Oyekunle Oyewusi