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.