Angular — Standalone Components

What are Standalone Components?

Standalone components don't need NgModules — they declare their own dependencies.

Basic Standalone Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <input [(ngModel)]="name">
    <p>Hello, {{name}}!</p>
  `
})
export class HelloComponent {
  name = '';
}

Standalone with Routing

const routes: Routes = [
  {
    path: '',
    loadComponent: () => import('./home/home.component')
      .then(m => m.HomeComponent)
  }
];

Standalone Directive

import { Directive, ElementRef, inject } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true
})
export class HighlightDirective {
  constructor() {
    inject(ElementRef).nativeElement.style.backgroundColor = 'yellow';
  }
}

Standalone Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverse',
  standalone: true
})
export class ReversePipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

Benefits

• No NgModule boilerplate
• Easier to understand
• Better tree-shaking
• Simpler dependency management

Mini Practice

1. Create a standalone component
2. Use standalone directive
3. Create standalone pipe
4. Lazy load standalone components

Up Next

Continue with Lazy Loading — lazy loading routes.