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`
• Are easier to test and reuse

Creating a Standalone Component

1import { Component } from '@angular/core';
2import { CommonModule } from '@angular/common';
3import { RouterLink } from '@angular/router';
4
5@Component({
6  selector: 'app-katana',
7  standalone: true,  // Key flag!
8  imports: [CommonModule, RouterLink],  // Dependencies
9  template: \`
10    <div class="katana-card">
11      <h2>{{ name }}</h2>
12      <p>Type: {{ type }}</p>
13      <p>Sharpness: {{ sharpness }}/10</p>
14
15      @if (sharpness >= 8) {
16        <span class="badge">Masterwork!</span>
17      }
18
19      <a routerLink="/collection">Back to collection</a>
20    </div>
21  \`,
22  styles: [\`
23    .katana-card {
24      border: 2px solid #8b4513;
25      padding: 1rem;
26      border-radius: 8px;
27    }
28    .badge {
29      background: gold;
30      padding: 0.25rem 0.5rem;
31    }
32  \`]
33})
34export class KatanaComponent {
35  name = 'Masamune';
36  type = 'Tachi';
37  sharpness = 9;
38}

Standalone vs NgModule-based

Old way (NgModule):

1// katana.component.ts
2@Component({
3  selector: 'app-katana',
4  template: '...'
5})
6export class KatanaComponent { }
7
8// katana.module.ts
9@NgModule({
10  declarations: [KatanaComponent],
11  imports: [CommonModule],
12  exports: [KatanaComponent]
13})
14export class KatanaModule { }

New way (Standalone):

1@Component({
2  selector: 'app-katana',
3  standalone: true,
4  imports: [CommonModule],
5  template: '...'
6})
7export class KatanaComponent { }

Much simpler! One file instead of two.

Generating a Standalone Component via CLI

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

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

1ng g c dojo

Bootstrapping a Standalone Application

1// main.ts
2import { bootstrapApplication } from '@angular/platform-browser';
3import { AppComponent } from './app/app.component';
4import { appConfig } from './app/app.config';
5
6bootstrapApplication(AppComponent, appConfig)
7  .catch(err => console.error(err));

1// app.config.ts
2import { ApplicationConfig } from '@angular/core';
3import { provideRouter } from '@angular/router';
4import { routes } from './app.routes';
5
6export const appConfig: ApplicationConfig = {
7  providers: [
8    provideRouter(routes)
9  ]
10};

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