← Back to Chapters

Angular Standalone Components

? Angular Standalone Components

? Quick Overview

In Angular 15+, standalone components let you build features without using NgModules. This simplifies your app structure, reduces boilerplate, and makes it easier to compose and bootstrap components directly.

Angular 15+ No NgModules Faster setup

? Key Concepts

  • standalone: true makes a component independent of any NgModule.
  • Dependencies (like CommonModule) are added via the component’s imports array.
  • You can bootstrap the app using bootstrapApplication() instead of bootstrapModule().
  • Standalone components are great for simpler routing, lazy loading, and feature isolation.
  • You can freely mix standalone components with existing module-based code during migration.

? Syntax / Theory

A standalone component is still declared with @Component, but it includes two important pieces:

  • standalone: true — marks the component as standalone.
  • imports: [...] — declares all directives, pipes, and other components it needs.

At the application entry point, you use bootstrapApplication() from @angular/platform-browser to start the app and optionally pass in a list of standalone components and providers.

? Creating a Standalone Component

? View Code Example 
// home.component.ts - standalone Home component
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule],
  template: '<h2>Welcome to Home</h2>'
})
export class HomeComponent { }

What this component does

This creates a standalone component with the selector app-home. It:

  • Uses CommonModule so you can access common directives like *ngIf and *ngFor.
  • Renders a simple heading: Welcome to Home.
  • Can be bootstrapped or imported anywhere without being declared in an NgModule.

? Using a Standalone Component with bootstrapApplication

? View Code Example 
// main.ts - bootstrapping the Angular app with standalone components
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { HomeComponent } from './app/home/home.component';

bootstrapApplication(AppComponent, {
  providers: [],
  imports: [HomeComponent]
});

Live Output / Runtime Behavior

  • bootstrapApplication(AppComponent, ...) starts the Angular app using AppComponent as the root.
  • HomeComponent is registered in the imports array, so it can be used inside AppComponent's template.
  • When the app runs, anywhere you use <app-home> you’ll see: “Welcome to Home”.
  • This setup avoids creating an AppModule, reducing boilerplate and improving clarity.

? Deep Dive Explanation

  • standalone: true makes the component independent of NgModules.
  • Required Angular features are pulled in via the component’s imports array.
  • bootstrapApplication directly bootstraps components without wrapping them in a module.
  • This approach reduces boilerplate and simplifies lazy loading and routing setups.

✅ Tips & Best Practices

  • Use standalone components for small or medium apps to reduce complexity and module noise.
  • Combine standalone components with standalone routing for a modern, module-free Angular setup.
  • Group related standalone components in feature folders for better organization.
  • Remember that standalone components can still import both other standalone components and traditional NgModules.
  • Migrate gradually: convert feature modules to standalone components one step at a time.

? Try It Yourself / Practice Tasks

  • Create a standalone AboutComponent that shows a short description of your app and display it inside AppComponent.
  • Add another standalone component (e.g., ContactComponent) and import it into AboutComponent.
  • Experiment with bootstrapping the app using multiple standalone components and see how they compose together.
  • Refactor an existing NgModule-based component to be standalone and compare the before/after code size.