Angular 14

1. Standalone components, directives, and pipes

No need to declare components into NgModule anymore.

• Instead use standalone: true into @Component arguments
• Quote from angular.io : "Existing applications can optionally and incrementally adopt the new standalone style without any breaking changes."

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
    selector: 'sample',
    standalone: true, // <-------------- HERE
    imports: [
        // import standalone Components, Directives, and Pipes
        CommonModule // and NgModules
    ],
    template: `
        <div>{{name}}</div>
    `
})
export class SampleComponent {
    name = "Angular 14";
}

2. Typed Angular forms

Types can now be set to FormControls when defining a FormGroup, providing type checking.

var contactForm = new FormGroup({
     name: new FormControl<string>('', { nonNullable: true }),
     email: new FormControl<string>('', { nonNullable: true }),
     contactNumber: new FormControl<number>(0, { nonNullable: false })
});

3. Page title in routes definition

It's possible to set the current page title in the routes definition instead of calling Title service.

The "title" is the title of the web page that appear in the browser tab or in the browser history

Before

constructor(private titleService: Title) {
    titleService.setTitle('Shanoir Home Page');
}

After

{
    path: 'home',
    component: HomeComponent,
    title: 'Shanoir Home Page'
},

4. Bind to protected component members

A Component member doesn't have to be public to be visible in the html template anymore, it can now be protected.*

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. Extended developer diagnostics

More warnings and errors in the template page from your IDE.