What's new in Angular 14

Table of content

Feature	Description
Standalone components
Typed Angular Forms
inject	a new function to inject dependencies

Standalone Directives/Components/Pipes

Typed Angular Forms

Define title in router

You can specify the title of a page in the router configuration now.

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    title: 'Home Page'
  }
];

Use TitleStrategy to set the title in the browser tab for complex scenarios.

@Injectable()
export class TemplatePageTitleStrategy extends TitleStrategy {
  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      document.title = `My App - ${title}`;
    } else {
      document.title = `My App - Home`;
  };
};

@NgModule({
  // ...
  providers: [{provide: TitleStrategy,  useClass: TemplatePageTitleStrategy}]
})
class MainModule {}

Target TypeScript 4.7 and ES2020

Bind to protected component members.

Start form Angular 14, you can bind protected properties in component class to your template.

@Component({
  selector: 'my-component',
  template: '{{ message }}',  // <--- Now compiles!
})
export class MyComponent {
  protected message: string = 'Hello world';
}

Optional injectors in Embedded Views

What’s Embedded views? Need further research.

viewContainer.createEmbeddedView(templateRef, context, {
  injector: injector,
})

New CLI commands

ng completion
ng analytics
ng cache
ng cache info

Experimental ESM Application build

Update the build config in angular.json to use the new esbuild builder.

"builder": "@angular-devkit/build-angular:browser"
"builder": "@angular-devkit/build-angular:browser-esbuild" // <-- new

inject functions

The new inject function in Angular 14 is a new way to inject dependencies into your components.

Reference

https://blog.angular.dev/angular-v14-is-now-available-391a6db736af