Angular 14 Features

    Angular 14 released in June 2022, came up with some new features. Here is the list of main features you will see as add-ons in Angular 14.

    Standalone Components, Directives and Pipes

    The new feature of standalone components is available for developer preview but is not stable. It means that this feature is out in beta mode, but this can be changed at a later stage.

    Its goal is to reduce the use of NgModule. Before Angular 14, each module is required to be associated with a module. If not done, the application would fail. But with Angular 14, these scenarios have been removed.

    How to use it?

    Use the flag `standalone: true` .

    This will add imports directly to the component.

    Example 

    @Component({

  selector: 'app-root',
  standalone: true,

  imports: [
    ObjectComponent,
    MarkerDirective,
    SharedModule,
    MatCardModule,
  ],

  template: `
    <mat-card>
      <app-object-component ></app-object-component>
    </mat-card>
  `,
})

    CLI Auto Completion

    If you’re one of the developers who use Angular CLI to create everything, this feature is for you.

    Previously, as many commands were available, the developer had to move to the official guide of the Angular application. But now, these commands can be auto-completed in real-time.

    How to set up?

    1. Open the terminal in IDE.

    2. Run the command ` ng completion `

    Angular Completion

    3. Type any ng command and press TAB(You’ll see all possible options)

    4. Press enter to opt for one of them.

    5. Also, when you type `ng serve` command, it should prompt as mentioned on Angular’s website. 

    $ ng serve

? Would you like to enable autocompletion? This will set up your terminal so pressing TAB while typing Angular CLI commands will show possible options and autocomplete arguments. (Enabling autocompletion will modify configuration files in your home directory.) Yes

Appended `source <(ng completion script)` to `/home/my-username/.bashrc`. Restart your terminal or run

source <(ng completion script)
 
to autocomplete `ng` commands.
 
# Serve output...

    Strictly Typed Forms

    There was an issue on GitHub related to Reactive forms in angular application. The link to the issue is available here .

    This issue is finally resolved in the Angular 14 version. It introduced strict typing for the Angular Reactive Forms package.

    These strict typed forms ensure the value inside these forms should be type-safe. This enables safer forms, especially for deeply nested complex cases.

    Example 

    const student= new FormGroup({

   name: new FormGroup({
      first: new FormControl(‘Paritosh’),
      last: new FormControl(‘Louhan’),
   }),
   id: new FormControl(45),
});

// TS Error: Property 'substring' does not exist on type 'number'.
let newId= student.value.id.substring(1) + 10;

    Angular dev tools

    Angular development tools are now available online. This can also be used as debugging extension in the offline version.

    Best Practices

    Angular has introduced change detection and runtime optimization processes to detect whether the application's state is changed. Angular periodically runs its change detection mechanism to reflect changes to the data model in an app’s view.

    Page Title

    In Angular 13, a new property was introduced known as `Route.title`. This property is required so that the page’s title uniquely communicates with the page’s content.

    In Angular 14, adding a title now doesn’t require importing any namespace and is a strong type.

    Previous Tutorial