Angular 14 | New Feature | Standalone Components/Pipes/Directives

Angular 14 Standalone Components/Pipes/Directives are very interesting and now the need of creating NgModule can completely be avoided.

Lets see how to create a Standalone Component

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

Now lets see how ParentComponent can use ChildComponent inside

import { Component } from "@angular/core";@Component({
selector: 'child-comp',
template: '<section>Child Component</section>',
standalone: true
})
export class ChildComponent {}
import { Component } from "@angular/core";
import { ChildComponent } from "../child/child.component";
@Component({
selector: 'parent-comp',
template: '<section>Parent Component <child-comp></child-comp></section>',
standalone: true,
imports: [
ChildComponent
]

})
export class ParentComponent {}

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();
}
}
import { Component } from "@angular/core";
import { CapitalCase } from "../capital/capital-case.pipe";
import { ChildComponent } from "../child/child.component";
@Component({
selector: 'parent-comp',
template: '<section>{{ "Parent Component" | capitalCase }} <child-comp></child-comp></section>',
standalone: true,
imports: [
ChildComponent,
CapitalCase
]
})
export class ParentComponent {}

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)
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(RouterModule.forRoot(APP_ROUTES)),
importProvidersFrom(HttpClientModule)
]
});

--

--

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