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

Angular14 brings new concept of writing “Standalone” components without using @NgModule so that you can directly use component into any page.

The word “Standalone” points to Components, Pipes and Directives which can then be used independently without use of @NgModule.

Even now you can also bootstrap your Angular application by just passing component reference instead passing module reference to Angular’s bootstrap api.

Lets see how to create a Standalone Component

While creating a component, just pass standalone flag in the component’s decorator to true.

import { Component } from "@angular/core";
@Component({
    selector: 'parent-comp',
    template: '<section>Parent Component</section>',
    standalone: true
})
export class ParentComponent {}

In the above code, you can see that we mentioned standalone flag to true to make ParentComponent independent from @NgModule.

Now you need to mention this component in the imports array of the Component where you want to use it.

For example — If you want to use this component into app.component then you can refer below code -

@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

As I mentioned above, if ChildComponent needs to be use into ParentComponent then you need to register ChildComponent into ParentComponent’s imports array.

For example — ChildComponent

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

ParentComponent

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

In the above code, you can see we added ChildComponent to ParentComponent’s imports array.

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();
    }
}

So in this way you can create Pipe also Standalone.

Below is the code where we can see how we can use it-

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

Before Angular14, it was required to pass AppModule reference to bootstrap api to kickoff angular application but now we can just pass Component reference and can bootstrap angular application.

Open main.ts, replace bootstrapModule() by bootstrapApplication() and pass the Component reference by just importing Component into main.ts.

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)

To register application wide services like Routes service, HTTPClient etc. which we were use to register with app.module.ts, now we can use importProvidersFrom as a second argument of bootstrapApplication() api.

Below is the example-

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(RouterModule.forRoot(APP_ROUTES)),
    importProvidersFrom(HttpClientModule)
  ]
});

I hope this article would help you to understand Angular Standalone concept and start using it in your application!!!

Stay tuned and subscribe to my Medium channel.

Thanks!!!