Angular 14 New Features

Latest Angular 14 Installation, Features & Updates

How to install Angular 14?

Angular 14 could be installed via npm using the next flag.

Simply open a new command line interface and run the following command to install the latest version of Angular:

npm install --global @angular/cli@next

This will install the latest version of Angular CLI globally on your development machine.

Check the angular CLI version using below command

ng version

Angular 14 Features

1. Standalone Components

With the release of Angular 14, standalone components will, at last, be a feasible option, and Angular modules will no longer be required.

A standalone component is not declared in any existing NgModule, and it directly manages its own dependencies (instead of having them managed by an NgModule) and can be depended upon directly, without the need for an intermediate NgModule.

Key Points

• Standalone component has the flag "standalone" we need to set the value true.
• Not Required to add the standalone component in ngModule.
• We can import the required modules in the component itself.
• Command,

  ng g c standalonedemo --standalone

  import { Component, OnInit } from '@angular/core';
  import { CommonModule } from '@angular/common';
  
  @Component({
      selector: 'app-standalonedemo',
      standalone: true,
      imports: [CommonModule],
      templateUrl: './standalonedemo.component.html',
      styleUrls: ['./standalonedemo.component.css']
  })
  export class StandalonedemoComponent implements OnInit {
      constructor() {}
      ngOnInit(): void {}
  }

  <div class="container pages text-justify pb-5">  
      <h1 class="mb-4">Angular 14 Standalone Component</h1>   
      <p>standalonedemo works!</p> 
  </div> 

2. Typed Forms

The most common request for an Angular feature on GitHub is for strictly typed forms, which, would improve the framework’s model-driven approach to the process of dealing with forms.

Key Points

• This feature is only for reactive forms.
• For using this feature tsconig.js should be in strict mode.
• Typed forms ensure that the values inside of form control, groups and array are type safe across the entire API surface.
• This helps developer for generating safer forms and it helps in case of complex nested object.
• If you want to use the older version you can use the untyped version.

E.g. create a contact us standalone component and add 4 fields in it (name, number, email, message) and import ReactiveFormsModule in it as shown below,

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, UntypedFormControl, UntypedFormGroup } from '@angular/forms';

@Component({
    selector: 'app-contactus',
    standalone: true,
    imports: [CommonModule, ReactiveFormsModule],
    templateUrl: './contactus.component.html',
    styleUrls: ['./contactus.component.css']
})
export class ContactusComponent implements OnInit {
    constructor() {}
    ngOnInit(): void {}
    contactForm = new FormGroup({
        name: new FormControl < string > (''),
        email: new FormControl(''),
        message: new FormControl(''),
        number: new FormControl()
    });
    contactFormUntyped = new UntypedFormGroup({
        name: new UntypedFormControl(''),
        email: new FormControl(''),
        message: new FormControl(''),
        number: new FormControl()
    });
    Submit() {
        console.log(this.contactForm.value);
        console.log(this.contactForm.value.email?.length); //check the null value
        console.log(this.contactForm.value.email!.length); //If you are sure value is not null
        console.log(this.contactFormUntyped.value.name.length); // throw error in browser
    }
}

<div class="container pages text-justify pb-5">  
    <h1 class="mb-4">Angular 14  Typed Form</h1>   
    <section class="mb-4"> 
        <!--Section heading--> 
        <div class="row"> 
            <!--Grid column-->
            <div class="col-md-9 mb-md-0 mb-5">
                <form [formGroup]="contactForm" (ngSubmit)="Submit()"> 
                    <!--Grid row-->
                    <div class="row"> 
                        <!--Grid column-->
                        <div class="col-md-6">
                            <div class="md-form mb-0">
                                <input formControlName="name" type="text" class="form-control">
                                <label for="name" class="">Your name</label>
                            </div>
                        </div>
                        <!--Grid column--> 
                        <!--Grid column-->
                        <div class="col-md-6">
                            <div class="md-form mb-0">
                                <input formControlName="email" type="text" class="form-control">
                                <label for="email" class="">Your email</label>
                            </div>
                        </div>
                        <!--Grid column--> 
                    </div>
                    <!--Grid row--> 
                    <!--Grid row-->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="md-form mb-0">
                                <input formControlName="number" type="text" class="form-control">
                                <label for="subject" class="">Number</label>
                            </div>
                        </div>
                    </div>
                    <!--Grid row--> 
                    <!--Grid row-->
                    <div class="row"> 
                        <!--Grid column-->
                        <div class="col-md-12"> 
                            <div class="md-form">
                                <textarea formControlName="message" type="text" rows="2" class="form-control md-textarea"></textarea>
                                <label for="message">Your message</label>
                            </div> 
                        </div>
                    </div>
                    <!--Grid row--> 
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form> 
            </div>
            <!--Grid column--> 
        </div> 
    </section>  
</div> 

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}"
     }
  }
}

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

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

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-onpushdemo',
    template: `<div>
  <app-child [ngModel]="value"></app-child>
</div>`,
    styleUrls: ['./onpushdemo.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnpushdemoComponent implements OnInit {
    public value: any = "old value";
    constructor(private _changeDetector: ChangeDetectorRef) {
        setTimeout(() => {
            debugger;
            this.value = "new value";
            this._changeDetector.markForCheck();
        }, 5000)
    }
    ngOnInit(): void {}
}

import { Component, forwardRef, OnInit } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
    selector: 'app-child',
    template: `<div (click)="click()">Current Value: {{value}}.
  Click me to force change detection</div>`,
    styleUrls: ['./child.component.css'],
    inputs: ['value'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => ChildComponent),
        multi: true
    }],
})
export class ChildComponent implements OnInit {
    constructor() {}
    public value: any;
    public onChange: (_: any) => void = (_: any) => {
        // do nothing
    };
    public onTouched: () => void = () => {
        // do nothing
    };
    public writeValue(value: any): void {
        this.value = value;
    }
    public click(): void {
        debugger;
        this.value = "child new value";
        // event just forces angular to re run change detection
    }
    public registerOnChange(fn: (_: any) => void): void {
        this.onChange = fn;
    }
    public registerOnTouched(fn: () => void): void {
        this.onTouched = fn;
    }
    ngOnInit(): void {}
}