Component decorator and metadata in Angular - Mini Project: Build & Apply

Component decorator and metadata

📖 Scenario: You are building a simple Angular component to display a welcome message on a webpage.

🎯 Goal: Create an Angular standalone component using the @Component decorator with metadata including selector, template, and standalone properties.

📋 What You'll Learn

Create a standalone Angular component named WelcomeComponent

Use the @Component decorator with metadata: selector, template, and standalone

Set the selector to 'app-welcome'

Set the template to display the text Welcome to Angular!

Set standalone to true

💡 Why This Matters

🌍 Real World

Angular components are the building blocks of web apps. Knowing how to create and configure them is essential for building user interfaces.

💼 Career

Frontend developers working with Angular must understand component decorators and metadata to build maintainable and reusable UI components.

1

Create the component class

Create an Angular component class named WelcomeComponent.

Angular

# Your code here
export class WelcomeComponent {
}

Need a hint?

Start by writing export class WelcomeComponent {} to define the component class.

2

Add the @Component decorator with selector

Add the @Component decorator above the WelcomeComponent class. Set the selector metadata to 'app-welcome'.

Angular

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

// Add @Component decorator with selector 'app-welcome' here
export class WelcomeComponent {
}

Need a hint?

Use @Component({ selector: 'app-welcome' }) above the class.

3

Add the template metadata

Inside the @Component decorator, add the template metadata with the value 'Welcome to Angular!'.

Angular

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

@Component({
  selector: 'app-welcome',
  // Add template here
})
export class WelcomeComponent {
}

Need a hint?

Add template: 'Welcome to Angular!' inside the @Component decorator.

4

Make the component standalone

Add the standalone metadata property inside the @Component decorator and set it to true.

Angular

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

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

Need a hint?

Add standalone: true inside the @Component decorator to make the component standalone.