Sign in
Skip to solution
easyFrontend

What are standalone components?

217 views
01

Understand the problem

Explain standalone components.

standalonemodules
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Standalone components (standalone: true) declare their own template dependencies via an imports array and don't need to be declared in an NgModule. They simplify the mental model, reduce boilerplate, and are now Angular's recommended default for new apps.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

A standalone component + bootstrap
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],                 // declares its OWN dependencies
  template: `
    <ul><li *ngFor="let t of todos">{{ t }}</li></ul>
  `,
})
export class AppComponent {
  todos = ['Learn standalone', 'Drop NgModules'];
}

// No AppModule needed:
bootstrapApplication(AppComponent);
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 11 of 121 decoded in the Angular track. One more won't hurt.

Back to track