Component decorator and metadata in Angular

Introduction

The Component decorator tells Angular that a class is a component. It also gives extra information (metadata) about how the component should work and look.

When you want to create a new UI part in your Angular app.

When you need to define the HTML and CSS for a piece of your app.

When you want to connect a TypeScript class to a template and styles.

When you want Angular to manage and display a part of your app.

When you want to add metadata like selector, template, and styles to a class.

Syntax

Angular

@Component({
  selector: 'app-name',
  templateUrl: './app-name.component.html',
  styleUrls: ['./app-name.component.css']
})
export class AppNameComponent {
  // component logic here
}

The @Component decorator is placed just above the class.

The object inside @Component({ ... }) holds metadata like selector, template, and styles.

Examples

A simple component with inline HTML template.

Angular

@Component({
  selector: 'app-hello',
  template: '<h1>Hello World!</h1>'
})
export class HelloComponent {}

Component using external HTML and CSS files.

Angular

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent {}

Component with inline styles inside the decorator.

Angular

@Component({
  selector: 'app-button',
  template: '<button>Click me</button>',
  styles: ['button { color: blue; }']
})
export class ButtonComponent {}

Sample Program

This component shows a heading and a paragraph with some styles. The selector app-greeting is used to place this component in HTML.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `<h2>Welcome to Angular!</h2><p>This is a simple component.</p>`,
  styles: [`h2 { color: green; } p { font-style: italic; }`]
})
export class GreetingComponent {}

Important Notes

The selector is the HTML tag you use to add the component in your app.

You can use either template for inline HTML or templateUrl for an external file.

Similarly, use styles for inline CSS or styleUrls for external CSS files.

Summary

The @Component decorator marks a class as an Angular component.

Metadata inside the decorator tells Angular how to display and style the component.

Use selector, template/templateUrl, and styles/styleUrls to define your component's look and usage.

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