How to Create Standalone Component in Angular Easily

To create a standalone component in Angular, use the @Component decorator with the standalone: true property. This makes the component independent of Angular modules, allowing direct use in routing or other components without declaring it in an NgModule.

Syntax

The @Component decorator defines a standalone component by setting standalone: true. You can also import other standalone components or Angular features directly using the imports array inside the decorator.

• selector: The HTML tag to use the component.
• template or templateUrl: The HTML content.
• standalone: true: Marks the component as standalone.
• imports: Array of other standalone components or Angular modules needed.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  standalone: true,
  template: `<h1>Hello from standalone component!</h1>`,
  imports: []
})
export class ExampleComponent {}

Example

This example shows a simple standalone component that displays a greeting message. It can be used directly in routing or inside other components without adding it to any NgModule.

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<h2>Welcome to Angular Standalone Component!</h2>`
})
export class GreetingComponent {}

Output

<h2>Welcome to Angular Standalone Component!</h2>

Common Pitfalls

Common mistakes when creating standalone components include:

• Forgetting to set standalone: true, which makes the component require an NgModule.
• Not importing necessary Angular modules (like CommonModule) in the imports array, causing template errors.
• Trying to declare standalone components inside NgModules, which is unnecessary and causes errors.

typescript

import { Component } from '@angular/core';
/* Wrong: Missing standalone flag */
@Component({
  selector: 'app-wrong',
  template: `<p>Missing standalone true</p>`
})
export class WrongComponent {}

/* Right: Adding standalone true and CommonModule import */
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-right',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Correct standalone component</p>`
})
export class RightComponent {}

Quick Reference

Remember these key points when working with standalone components:

• Use standalone: true in the @Component decorator.
• Import Angular modules like CommonModule in imports if you use directives like *ngIf or *ngFor.
• Standalone components do not need to be declared in NgModules.
• You can use standalone components directly in Angular routing.

Key Takeaways

Add 'standalone: true' in the @Component decorator to create a standalone component.

Use the 'imports' array to include Angular modules or other standalone components needed.

Standalone components do not require declaration in any NgModule.

Remember to import CommonModule for common directives like *ngIf and *ngFor.

Standalone components can be used directly in routing or other components.