Angular 14 was one of the most anticipated updates
to the enormously popular platform.
It was released in June 2022.
* How to upgrade to Angular 14
If you are using Angular 13, run the command
ng update @angular/core@14 @angular/cli@14
to update all Angular dependencies to Angular 14. Also, Angular 14 requires some
new prerequisites to build an application.
Angular 14 prerequisites
Typescript 4.7.
Node version 14.15.0 or later.
1. Standalone components, directives, and pipes
you can create a module-less Angular application using the standalone flag.
Right now, this feature is in the developer preview state.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
@Component({
selector: 'app-root',
standalone: true,
imports: [
// import standalone Components, Directives, and Pipes
CommonModule // and NgModules
],
template: `
<div>{{name}}</div>
})
export class SampleComponent {
name = "Angular 14";
}
// Bootstrap a new Angular application using our `SampleComponent` as a root
component.
bootstrapApplication(SampleComponent);
2. Typed Angular forms
Typed forms ensure that the values inside form controls,
groups, and arrays are type-safe across the entire
API surface.
This enables safer forms, especially for deeply nested
complex cases. The schematic ng update provides backward
compatibility for your existing forms.
Syncfusion’s Angular Forms components are compatible with
the typed Angular forms functionality.
export class SampleComponent {
var contactForm = new FormGroup({
name: new FormControl<string>('', { nonNullable: true }),
email: new FormControl<string>('', { nonNullable: true }),
contactNumber: new FormControl<number>(0, { nonNullable: false })
});
}
3. Streamlined page title accessibility
In Angular 14, we can add the router title without any additional import on the
page. Refer to the following code example.
const routes: Routes = [{
path: 'home',
component: HomeComponent
title: 'Home page' // <-- Page title
}, {
path: 'about',
component: AboutComponent,
title: 'About page' // <-- Page title
}];
4. Extended developer diagnostics
The extendable developer diagnostics feature provides extendable frameworks that
help developers better understand the templates and display suggestions for
potential enhancements. It helps improve caching before runtime, provide actionable
suggestions for a template, and helps diagnose warnings at compile time.
5. More built-in improvements
Angular 14 also includes support for the latest TypeScript 4.7 release and now
targets ES2020 by default, which allows the CLI to ship smaller code without paring
down features.
6. Bind to protected component members
Now you can bind protected component members directly from the template. Refer to
the following code example.
@Component({
selector: 'app-root',
template: '{{ title }}', // Now compiles!
})
export class SampleComponent {
protected title: string = 'Angular 14';
}
7. Optional injectors in embedded Views
Angular 14 supports passing in an optional injector when creating an embedded view
through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView.
This injector enables customization of dependency injection behavior within the
specific template.
Refer to the following code.
viewContainer.createEmbeddedView(templateRef, context, {
injector: injector,
})
TemplateRef.createEmbeddedView
8.Angular CLI Auto-Completion
The new functionality of Angular 14, CLI enables real-time type ahead auto-
completion in the terminal.
For that, you have to execute the ng completion command in your terminal for the
first time.
Just type ng , then press Tab to see all of the alternatives and Enter to select
one;
however, if you are working on an Angular 14 project,
you have more auto-completion options, such as the ng generate command options.
