Angular14 | Hot Features

Angular14 brings many features which were very demanding and developer community were seriously looking for.

Lets take a tour of all hot features-

1# Standalone Components/Pipes/Directive —

import { Component } from "@angular/core";@Component({
selector: 'parent-comp',
template: '<section>Parent Component</section>',
standalone: true
})
export class ParentComponent {}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
standalone: true,
imports: [
ParentComponent
]

})
export class AppComponent {}

Lets see how to make Pipe as a Standalone Pipe

import { Pipe, PipeTransform } from "@angular/core";@Pipe({
name: 'capitalCase',
standalone: true
})
export class CapitalCase implements PipeTransform {
transform(value: any, ...args: any[]) {
return value?.toUpperCase();
}
}

Lets see how we can bootstrap Angular application by just passing component reference

import { enableProdMode } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
bootstrapApplication(AppComponent)

2# Forms are more typesafe now

3# Banana in a box [()] error catching in template

4# Class protected member can now also be accessed into template

5# Catch nullish coalescing (??) incorrect usage in template while compile the code

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store