Component decorator and metadata in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Component decorator in Angular?

The @Component decorator marks a class as an Angular component and provides metadata that tells Angular how to process, instantiate, and use the component in the app.

beginner

Name three common metadata properties used inside the @Component decorator.

Common metadata properties include:
- selector: the HTML tag to use the component
- templateUrl or template: the HTML view for the component
- styleUrls or styles: CSS styles for the component

beginner

How does the 'selector' property in @Component metadata affect the component?

The 'selector' defines the custom HTML tag that represents the component. When Angular sees this tag in HTML, it creates and inserts the component there.

intermediate

What is the difference between 'template' and 'templateUrl' in component metadata?

'template' contains inline HTML code as a string inside the component metadata.
'templateUrl' points to an external HTML file that contains the component's template.

beginner

Why is metadata important in Angular components?

Metadata tells Angular how to create and display the component, what HTML tag to use, what template and styles to apply, and how to connect the component to the app.

Which decorator is used to define an Angular component?

A @Component

B @Injectable

C @Directive

D @NgModule

The @Component decorator is specifically used to define Angular components.

What does the 'selector' property in @Component metadata specify?

A The CSS styles for the component

B The external JavaScript file for the component

C The HTML tag name to use the component

D The component's class name

The 'selector' defines the custom HTML tag that represents the component.

Which property would you use to link an external HTML file as the component's template?

A styleUrls

B templateUrl

C template

D styles

'templateUrl' points to an external HTML file for the component's template.

Can you use inline CSS styles inside the @Component decorator metadata?

A Yes, using the 'styles' property

B Only with the 'template' property

C No, styles must be in external files

D Only in the main app module

You can use the 'styles' property to add inline CSS styles directly in the component metadata.

What happens if you forget to add a selector in the @Component metadata?

A The component will throw a runtime error

B Angular will use a default selector

C The component will automatically render everywhere

D The component cannot be used in HTML templates

Without a selector, Angular does not know what HTML tag to use for the component, so it cannot be inserted in templates.

Explain the role of the @Component decorator and its metadata in Angular.

Think about how Angular knows what a component is and how to display it.

Describe the difference between 'template' and 'templateUrl' in component metadata and when you might use each.

Consider how you organize your HTML code for components.

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