Component decorator and metadata in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Angular component render?

Consider this Angular component code. What will be displayed in the browser when this component is used?

Angular

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

@Component({
  selector: 'app-greet',
  template: `<h1>Hello, {{name}}!</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class GreetComponent {
  name = 'Alice';
}

A <h1>Hello, Alice!</h1> with blue text

B Error because styles property is invalid

C Nothing renders because of missing selector

D <h1>Hello, {{name}}!</h1> with default black text

💡 Hint

Look at the template and the value of the 'name' property.

The template uses interpolation {{name}} which Angular replaces with the value of the 'name' property, 'Alice'. The styles apply blue color to the <h1> element.

📝 Syntax

intermediate

Which option correctly defines a component with inline template and styles?

Choose the correct Angular component decorator syntax that uses inline template and styles.

A @Component({ selector: 'app-test', templateUrl: 'test.html', styles: ['p { color: red; }'] })

B @Component({ selector: 'app-test', template: '<p>Test</p>', styles: ['p { color: red; }'] })

C @Component({ selector: 'app-test', template: '<p>Test</p>', styleUrls: ['test.css'] })

D @Component({ selector: 'app-test', templateUrl: 'test.html', styleUrls: ['test.css'] })

💡 Hint

Inline template uses 'template' property, not 'templateUrl'. Inline styles use 'styles', not 'styleUrls'.

Inline template is provided with 'template' property as a string. Inline styles are provided with 'styles' as an array of strings. 'templateUrl' and 'styleUrls' are for external files.

🔧 Debug

advanced

What error does this component code produce?

Examine this Angular component code. What error will Angular throw when compiling or running this component?

Angular

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

@Component({
  selector: 'app-error',
  template: `<p>{{message}}</p>`
})
export class ErrorComponent {
  constructor() {
    console.log(this.message.length);
  }
  message: string;
}

A Syntax error: Missing semicolon after message declaration

B No error, outputs empty paragraph

C Runtime error: Cannot read property 'length' of undefined

D Compile error: Template syntax invalid

💡 Hint

Consider when the constructor runs and if 'message' is initialized.

The 'message' property is declared but not initialized before the constructor runs. Accessing 'this.message.length' causes a runtime error because 'message' is undefined.

🧠 Conceptual

advanced

What is the purpose of the 'selector' property in @Component?

In Angular's @Component decorator, what does the 'selector' property do?

A Defines the HTML tag name to use this component in templates

B Specifies the CSS selector to style the component

C Sets the component's class name for debugging

D Indicates the file path of the component's template

💡 Hint

Think about how you add this component inside other HTML or templates.

The 'selector' defines the custom HTML tag that Angular looks for to insert this component's template. For example, 'app-hello' means <app-hello> in HTML.

❓ state_output

expert

What is the final value of 'count' after this component runs?

Given this Angular component, what is the value of 'count' after the component initializes?

Angular

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

@Component({
  selector: 'app-counter',
  template: `<button (click)='increment()'>Count: {{count}}</button>`
})
export class CounterComponent {
  count = 0;

  constructor() {
    this.increment();
  }

  increment() {
    this.count += 1;
  }
}

A Undefined

B 0

C 2

D 1

💡 Hint

The constructor calls increment once before rendering.

The 'count' starts at 0. The constructor calls 'increment()', which adds 1. So the final value is 1 before any user clicks.

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