Why standalone components matter in Angular - See It in Action

Why standalone components matter

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Standalone components simplify Angular app structure, making it easier to build and maintain small to medium apps or micro frontends.

💼 Career

Understanding standalone components is important for modern Angular development and helps you write cleaner, more efficient code that aligns with the latest Angular best practices.

1

Create the standalone component

Create a standalone Angular component named WelcomeComponent with the selector app-welcome. Use the @Component decorator with standalone: true and a template that contains an <h1> tag with the text 'Welcome to Angular Standalone Components!'.

Angular

import { Component } from '@angular/core';

// Your code here

Need a hint?

Use the @Component decorator with the standalone: true option and define the template inline.

2

Bootstrap the standalone component

In the main.ts file, bootstrap the WelcomeComponent directly using bootstrapApplication from @angular/platform-browser. Import bootstrapApplication and WelcomeComponent and call bootstrapApplication(WelcomeComponent).

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { WelcomeComponent } from './app/welcome.component';

// Your code here

Need a hint?

Use bootstrapApplication to start the app with the standalone component.

3

Add styles to the component

Add a styles array to the @Component decorator in WelcomeComponent with a CSS rule that sets the h1 color to navy.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular Standalone Components!`,
  // Your code here
})
export class WelcomeComponent {}

import { bootstrapApplication } from '@angular/platform-browser';
import { WelcomeComponent } from './app/welcome.component';

bootstrapApplication(WelcomeComponent);

Need a hint?

Add a styles property with an array of CSS strings inside the @Component decorator.

4

Add accessibility with ARIA label

Add an aria-label attribute with the value 'Welcome message' to the <h1> tag in the WelcomeComponent template.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular Standalone Components!`,
  styles: [
    `h1 { color: navy; }`
  ]
})
export class WelcomeComponent {}

import { bootstrapApplication } from '@angular/platform-browser';
import { WelcomeComponent } from './app/welcome.component';

bootstrapApplication(WelcomeComponent);

Need a hint?

Add the aria-label attribute inside the <h1> tag in the template string.