Standalone component declaration in Angular - Mini Project: Build & Apply

Standalone Component Declaration in Angular

📖 Scenario: You are building a simple Angular app that shows a welcome message. You want to create a standalone component that can be used without needing a module.

🎯 Goal: Create a standalone Angular component named WelcomeComponent that displays the text "Welcome to Angular Standalone Components!" inside an <h1> tag.

📋 What You'll Learn

Create a standalone component named WelcomeComponent

Use the @Component decorator with standalone: true

Include a template that displays the welcome message inside an <h1> tag

Export the component class named exactly WelcomeComponent

💡 Why This Matters

🌍 Real World

Standalone components let you build Angular apps faster by avoiding the need for NgModules, making your code simpler and more modular.

💼 Career

Knowing how to create and use standalone components is essential for modern Angular development and is a skill expected in many Angular developer roles.

1

Create the component class and import Component

Write the import statement for Component from @angular/core and start declaring a class named WelcomeComponent.

Angular

// Import Component from @angular/core
// Declare class WelcomeComponent
// Your code here

Need a hint?

Use import { Component } from '@angular/core'; and declare export class WelcomeComponent {}.

2

Add the @Component decorator with standalone: true

Add the @Component decorator above the WelcomeComponent class with standalone: true and an empty template string.

Angular

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

// Add @Component decorator with standalone: true and empty template
// Your code here
export class WelcomeComponent {
}

Need a hint?

Use @Component({ standalone: true, template: '' }) above the class.

3

Add the welcome message inside the template

Replace the empty template string with a template that contains an <h1> tag showing the text "Welcome to Angular Standalone Components!".

Angular

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

@Component({
  standalone: true,
  // Replace template with Welcome to Angular Standalone Components!
  template: ''
})
export class WelcomeComponent {
}

Need a hint?

Put the welcome message inside the <h1> tags in the template string.

4

Export the standalone component for use

Ensure the WelcomeComponent class is exported so it can be used in other parts of the app.

Angular

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

@Component({
  standalone: true,
  template: 'Welcome to Angular Standalone Components!'
})
// Make sure the class is exported
// Your code here

Need a hint?

Use export class WelcomeComponent to make the component usable outside this file.