What are Standalone components in Angular?

The “Standalone component” offered by Angular 14 was one of its best features.

Standalone APIs provided by Angular make the component able to bootstrap instead of using a module.

Before Angular V14, we used to provide which component is to be bootstrapped in the bootstrap property of NgModule. The set of components that are bootstrapped when this module is bootstrapped. The components listed here are automatically added to entryComponents.

@NgModule({
  declarations: [AppComponent, InputFormat, StrPipe, ChildrenOneComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})

Now let’s see how we can bootstrap a component without the use of the module, yes that’s the standalone component.

1. Enable standalone mode in the component, standalone: true

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/guide/standalone-components">
      Learn more about Standalone Component 
    </a>
  `,
})

2. Remove the app module and enwrap the standalone component inside bootstrapApplication()

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Hello from {{name}}!</h1>
    <a target="_blank" href="https://angular.io/guide/standalone-components">
      Learn more about Standalone Component 
    </a>
  `,
})
export class App {
  name = 'Standalone Component';
}

bootstrapApplication(App);

Boom!! the app component is now able to be launched in the browser without the app module.

If the interviewer asks you what is standalone components, Thank me later.!

Ref: StackBlitz code

Additionally angular provides a CLI command to create a standalone component.

ng g c --standalone <component-name>

If you have enjoyed the content please do follow and appreciate me with your claps 👏🏼