Explain Angular 14 with New Features and Updates
V V R Reddy

Publisher : V V R Reddy


Explain Angular 14 with New Features and  Updates
Angular 14, the latest version of the TypeScript-based free and open-source web app framework was launched on 2nd June 2022. Considering all the releases before, Angular 14 is one of Angular's most methodical pre-planned upgrades. If you are interested in a bird-eye view of what's fresh in Angular 14, then here's a quick sneak at latest Angular 14 features and updates.

Standalone Components

Angular standalone components aim to streamline the authoring of Angular applications by reducing the need for NgModules. In v14, standalone components are in developer preview. They are ready to be used in your applications for exploration and development, but are not a stable API and will potentially change outside our typical model of backwards compatibility.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // includes NgIf and TitleCasePipe
import { bootstrapApplication } from '@angular/platform-browser';

import { MatCardModule } from '@angular/material/card';
import { ImageComponent } from './app/image.component';
import { HighlightDirective } from './app/highlight.directive';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    ImageComponent, HighlightDirective, // import standalone Components,
Directives and Pipes
    CommonModule, MatCardModule // and NgModules
  ],
  template: `
    <mat-card *ngIf="url">
      <app-image-component [url]="url"></app-image-component>
      <h2 app-highlight>{{name | titlecase}}</h2>
    </mat-card>
  `
})
export class ExampleStandaloneComponent {
  name = "emma";
  url = "www.emma.org/image";
}

// Bootstrap a new Angular application using our `ExampleStandaloneComponent` 
as a root component.
bootstrapApplication(ExampleStandaloneComponent);
With standalone components, directives and pipes, the standalone: true flag allows you to add imports directly in your @Component() without an @NgModule().

Typed Angular Forms

Angular v14 closes Angular’s top GitHub issue: implementing strict typing for the Angular Reactive Forms package.

Typed forms ensure that the values inside of form controls, groups, and arrays are type safe across the entire API surface. This enables safer forms, especially for deeply nested complex cases.
const cat = new FormGroup({
   name: new FormGroup({
      first: new FormControl('Barb'),
      last: new FormControl('Smith'),
   }),
   lives: new FormControl(9),
});

// Type-checking for forms values!
// TS Error: Property 'substring' does not exist on type 'number'.
let remainingLives = cat.value.lives.substring(1);

// Optional and required controls are enforced!
// TS Error: No overload matches this call.
cat.removeControl('lives');

// FormGroups are aware of their child controls.
// name.middle is never on cat
let catMiddleName = cat.get('name.middle');​

Update schematics allows for incremental migration to typed forms, so you can gradually add typing to your existing forms with full backwards compatibility. ng update will replace all form classes with untyped versions (for example, FormGroup -> UntypedFormGroup). You can then enable types at your own pace (for example, UntypedFormGroup -> FormGroup).

// v13 untyped form
const cat = new FormGroup({
   name: new FormGroup(
      first: new FormControl('Barb'),
      last: new FormControl('Smith'),
   ),
   lives: new FormControl(9)
});

// v14 untyped form after running `ng update`
const cat = new UntypedFormGroup({
   name: new UntypedFormGroup(
      first: new UntypedFormControl('Barb'),
      last: new UntypedFormControl('Smith'),
   ),
   lives: new UntypedFormControl(9)
});

In order to take advantage of new typing support, we recommend searching for instances of the Untyped forms controls and migrating to the new typed forms API surface where possible.

// v14 partial typed form, migrating `UntypedFormGroup` -> `FormGroup`
const cat = new FormGroup({
   name: new FormGroup(
      first: new UntypedFormControl('Barb'),
      last: new UntypedFormControl('Smith'),
   ),
   lives: new UntypedFormControl(9)
});

Streamlined best practices

Angular v14 brings built-in features that enable developers to build high quality apps, from routing to your code editor, starting with new change detection guides on angular.io.
 

Streamlined page title accessibility (Title Strategy)

Your page title shows the content of your page differently when you are developing applications. In Angular 13, the entire process of adding titles was streamlined with the fresh Route.title property in the Angular router. However, Angular 14 doesn't have more additional imports needed when you are adding a title to your page.
 
Go to the routing module where we define our routes now. We have a feature to add the title in the route and implement the TitleStrategy by extending the approuting module as shown.

import { NgModule } from '@angular/core';
import { RouterModule, RouterStateSnapshot, Routes, TitleStrategy } from '@angular/router';
import { ContactusComponent } from './contactus/contactus.component';
import { HomeComponent } from './home/home.component';
import { StandalonedemoComponent } from './standalonedemo/standalonedemo.component';

const routes: Routes = [
  {path:'',component:HomeComponent, title : "Core Knowledge Sharing"},
  { path: 'standalonedemo', component: StandalonedemoComponent, title : "Stand alone Component" },
  { path: 'contactus', component: ContactusComponent, title : "Contact Us" }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule extends TitleStrategy {
  updateTitle(snapshot: RouterStateSnapshot): void {
     const pageTitle = this.buildTitle(snapshot);
     if(pageTitle != undefined){
      document.title = "${pageTitle}"
     }
  }
}​

Extended developer diagnostics

New extended diagnostics provide an extendable framework that gives you more insight into your templates and how you might be able to improve them. Diagnostics give compile-time warnings with precise, actionable suggestions for your templates, catching bugs before run-time.

We are excited about the flexible framework this introduces for developers to add diagnostics in the future.

More built-in improvements

v14 includes support for the latest TypeScript 4.7 release and now targets ES2020 by default, which allows the CLI to ship smaller code without downleveling.
 
In addition, there are three more featurettes we want to highlight:

Bind to protected component members

In v14, you can now bind to protected component members directly from your templates, thanks to a contribution from Zack Elliott!
@Component({
  selector: 'my-component',
  template: '{{ message }}',  // Now compiles!
})
export class MyComponent {
  protected message: string = 'Hello world';
}
This gives you more control over the public API surface of your reusable components.

Optional injectors in Embedded Views

v14 adds support for passing in an optional injector when creating an embedded view through ViewContainerRef.createEmbeddedView and TemplateRef.createEmbeddedView. The injector allows for the dependency injection behavior to be customized within the specific template.
 
This enables cleaner APIs for authoring reusable components and for component primitives in Angular CDK.
viewContainer.createEmbeddedView(templateRef, context, {
  injector: injector,
})

NgModel OnPush

And finally, a community contribution by Artur Androsovych closes a top issue and ensures that NgModel changes are reflected in the UI for OnPush components.

@Component({
  selector: 'my-component',
  template: `
    <child [ngModel]="value"></child>

  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class MyComponent {}

Built-in primitives and tooling

CDK and tooling improvements supply the building blocks for a stronger development environment, from CDK menu primitives to CLI auto-completion.

New primitives in the Angular CDK

Angular’s Component Dev Kit provides a whole suite of tools for building Angular components. In v14, we’re promoting the CDK Menu and Dialog to stable!

Angular CLI enhancements

Standardized CLI argument parsing means more consistency across the entire Angular CLI, and now every flag uses --lower-skewer-case format. We have removed deprecated camel case arguments support and added support for combined aliases usage.
 
Curious what this means? Run ng --help for cleaner output that explains your options.

ng completion

Accidentally typing ng sevre instead of ng serve happens all the time. Typos are one of the most common reasons a command line prompt throws an error. To solve this, v14’s new ng completion introduces real-time type-ahead autocompletion!

ng analytics

The CLI’s analytics command allows you to control analytics settings and print analytics information. More detailed output clearly communicates your analytics configurations, and provides our team with telemetry data to inform our project prioritization.

ng cache

ng cache provides a way to control and print cache information from the command line. You can enable, disable, or delete from disk, and print statistics and information.