Standalone Components - Independent Warriors

Since Angular 17, Standalone Components are the default and recommended way of creating components. They are like ronin - independent warriors who do not need to belong to a clan (NgModule).

What are Standalone Components?

Standalone Components are components that:

• Do not require declaration in an NgModule
• Manage their own dependencies through imports - this is where you list the components, directives and pipes the template uses
• Are easier to test and reuse

Creating a Standalone Component

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-katana',
  standalone: true,  // Default since Angular 19 - we write it explicitly
  imports: [CommonModule, RouterLink],  // Dependencies
  template: `
    <div class="katana-card">
      <h2>{{ name }}</h2>
      <p>Type: {{ type }}</p>
      <p>Sharpness: {{ sharpness }}/10</p>

      @if (sharpness >= 8) {
        <span class="badge">Masterwork!</span>
      }

      <a routerLink="/collection">Back to collection</a>
    </div>
  `,
  styles: [`
    .katana-card {
      border: 2px solid #8b4513;
      padding: 1rem;
      border-radius: 8px;
    }
    .badge {
      background: gold;
      padding: 0.25rem 0.5rem;
    }
  `]
})
export class KatanaComponent {
  name = 'Masamune';
  type = 'Tachi';
  sharpness = 9;
}

The @if (condition) { ... } block is the new syntax for conditional rendering (built-in control flow, since Angular 17). It replaces the older *ngIf directive.

Standalone vs NgModule-based

Old way (NgModule):

// katana.component.ts
@Component({
  selector: 'app-katana',
  template: '...'
})
export class KatanaComponent { }

// katana.module.ts
@NgModule({
  declarations: [KatanaComponent],
  imports: [CommonModule],
  exports: [KatanaComponent]
})
export class KatanaModule { }

New way (Standalone):

@Component({
  selector: 'app-katana',
  standalone: true,
  imports: [CommonModule],
  template: '...'
})
export class KatanaComponent { }

Much simpler! One file instead of two.

Generating a Standalone Component via CLI

ng generate component dojo --standalone
# or shorter:
ng g c dojo --standalone

Since Angular 17+, the --standalone flag is the default, so you just need:

ng g c dojo

Since Angular 19, standalone: true is also the default in the decorator, so the CLI no longer adds it. In this module we write it explicitly to make it visible that the component is standalone.

Bootstrapping a Standalone Application

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

Clean, clear, and modern - like minimalist Japanese aesthetics!