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 {
}

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 {
}

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 {
}

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 {
}

Hint

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

Practice

1. What is the main purpose of the @Component decorator in Angular?

easy

A. To create a routing configuration

B. To define a service for dependency injection

C. To mark a class as an Angular component and provide metadata

D. To import external modules

Solution

1. Step 1: Understand the role of decorators in Angular

   Decorators add metadata to classes, telling Angular how to use them.

2. Step 2: Identify what @Component specifically does

   @Component marks a class as a component and provides metadata like selector and template.

3. Final Answer:

   To mark a class as an Angular component and provide metadata -> Option C

4. Quick Check:

   @Component marks component class = C [OK]

Hint: Remember: @Component decorates component classes only [OK]

Common Mistakes:

• Confusing @Component with @Injectable
• Thinking @Component defines routing
• Assuming @Component imports modules

2. Which of the following is the correct way to specify the HTML template inline in a component decorator?

easy

A. @Component({ template: 'Hello' })

B. @Component({ templateUrl: './app.component.html' })

C. @Component({ templateFile: 'app.component.html' })

D. @Component({ htmlTemplate: 'Hello' })

Solution

1. Step 1: Recall the difference between template and templateUrl

   template is for inline HTML, templateUrl is for external file path.

2. Step 2: Identify the correct syntax for inline template

   Only template: '

   Hello

   ' is valid for inline HTML.

3. Final Answer:

   @Component({ template: '<h1>Hello</h1>' }) -> Option A

4. Quick Check:

   Inline HTML uses template property = A [OK]

Hint: Use 'template' for inline HTML, 'templateUrl' for files [OK]

Common Mistakes:

• Using templateUrl with inline HTML
• Using wrong property names like templateFile
• Confusing template and htmlTemplate

3. Given this component decorator:

@Component({ selector: 'app-hello', template: '
{{ message }}
' })
export class HelloComponent { message = 'Hi!'; }

What will be rendered in the browser when <app-hello></app-hello> is used?

medium

A. {{ message }}

B. Hi!

C. An empty paragraph

D. Error: message is undefined

Solution

1. Step 1: Understand Angular interpolation

   The double curly braces {{ message }} bind to the component's property 'message'.

2. Step 2: Check the value of 'message' in the component

   It is set to 'Hi!', so Angular replaces {{ message }} with 'Hi!'.

3. Final Answer:

   <p>Hi!</p> -> Option B

4. Quick Check:

   Interpolation shows property value = A [OK]

Hint: {{ }} shows property value, not raw text [OK]

Common Mistakes:

• Thinking interpolation shows raw {{ message }}
• Assuming message is undefined without constructor
• Expecting empty output without initialization

4. Identify the error in this component decorator:

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styles: ['./test.component.css']
})
export class TestComponent {}

medium

A. The selector name is invalid

B. Missing @Injectable decorator

C. templateUrl should be template for inline HTML

D. The styles property should be styleUrls for external CSS files

Solution

1. Step 1: Check the use of styles vs styleUrls

   styles is for inline CSS strings; styleUrls is for external CSS files.

2. Step 2: Identify the mistake in the code

   The code uses styles with a file path array, which is incorrect; it should be styleUrls.

3. Final Answer:

   The styles property should be styleUrls for external CSS files -> Option D

4. Quick Check:

   External CSS uses styleUrls, not styles = D [OK]

Hint: Use styleUrls for files, styles for inline CSS [OK]

Common Mistakes:

• Confusing styles and styleUrls
• Thinking styles accepts file paths
• Adding @Injectable to components

5. You want to create a reusable button component with the selector app-button that uses an external HTML template and multiple CSS files. Which is the correct component decorator configuration?

hard

A. @Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] })

B. @Component({ selector: 'app-button', template: 'Click', styles: ['./btn.css', './colors.css'] })

C. @Component({ selector: 'app-button', templateUrl: './button.html', styles: ['./btn.css', './colors.css'] })

D. @Component({ selector: 'app-button', template: './button.html', styleUrls: ['./btn.css', './colors.css'] })

Solution

1. Step 1: Identify how to specify external HTML template

   Use templateUrl with the path to the HTML file.

2. Step 2: Identify how to specify multiple external CSS files

   Use styleUrls with an array of CSS file paths.

3. Step 3: Check each option for correct usage

   The configuration using templateUrl: './button.html' and styleUrls: ['./btn.css', './colors.css'] is correct. Others incorrectly use template for a file path or styles for external CSS files.

4. Final Answer:

   @Component({ selector: 'app-button', templateUrl: './button.html', styleUrls: ['./btn.css', './colors.css'] }) -> Option A

5. Quick Check:

   External HTML + multiple CSS files = templateUrl + styleUrls = B [OK]

Hint: External HTML needs templateUrl; multiple CSS files need styleUrls [OK]

Common Mistakes:

• Using styles for external CSS files
• Using template instead of templateUrl for files
• Mixing inline and external template properties