Type annotations in components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular component with typed input?

Consider this Angular standalone component using type annotations for its input property. What will be rendered in the browser?

Angular

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

@Component({
  selector: 'app-greet',
  standalone: true,
  template: `<p>Hello, {{ name.toUpperCase() }}!</p>`
})
export class GreetComponent {
  @Input() name!: string;
}

A <p>Hello, WORLD!</p>

B <p>Hello, world!</p>

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

D Compilation error: Property 'name' is not initialized

💡 Hint

Think about how Angular initializes inputs and the effect of the ! operator.

The name input is marked with ! which tells TypeScript it will be initialized by Angular. When passed name='world', the template calls toUpperCase() on 'world', rendering 'WORLD'.

📝 Syntax

intermediate

Which option correctly types a component property as a number array?

In Angular, you want to declare a component property scores as an array of numbers. Which option is syntactically correct?

A scores: number = [10, 20, 30];

B scores: Array = [10, 20, 30];

C scores: [number] = [10, 20, 30];

D scores: number[] = [10, 20, 30];

💡 Hint

Remember the TypeScript syntax for arrays.

Option D uses number[] which is the correct way to type an array of numbers. Option D misses the generic type. Option D is a tuple type with one number, not an array. Option D is a number, not an array.

🔧 Debug

advanced

What error does this Angular component produce due to incorrect type annotation?

Analyze the following Angular component code. What error will occur when compiling or running it?

Angular

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<p>Count: {{ count }}</p>`
})
export class CounterComponent {
  @Input() count: string = 0;
}

A Template error: Interpolation expects a number but got string.

B TypeScript error: Type 'number' is not assignable to type 'string'.

C Runtime error: Cannot read property 'count' of undefined.

D No error; component works fine.

💡 Hint

Check the type of count and its assigned value.

The property count is typed as string but assigned the number 0. TypeScript will raise an error because the types do not match.

❓ lifecycle

advanced

How does TypeScript type annotation affect Angular component lifecycle hooks?

Given this Angular component with a typed property and ngOnInit lifecycle hook, what will be the value of message after initialization?

Angular

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

@Component({
  selector: 'app-msg',
  standalone: true,
  template: `<p>{{ message }}</p>`
})
export class MsgComponent implements OnInit {
  message!: string;

  ngOnInit() {
    this.message = 'Hello from ngOnInit';
  }
}

A Compilation error: Property 'message' is not initialized

B The template displays: undefined

C The template displays: Hello from ngOnInit

D Runtime error: Cannot read property 'message' of undefined

💡 Hint

Consider the effect of the ! operator and when ngOnInit runs.

The ! tells TypeScript the property will be initialized later. Angular calls ngOnInit after construction, setting message. The template then displays the assigned string.

🧠 Conceptual

expert

Which statement about type annotations in Angular components is TRUE?

Choose the correct statement about how TypeScript type annotations affect Angular component behavior and compilation.

A Type annotations help catch errors at compile time but do not affect runtime behavior.

B Type annotations enforce runtime type checks in Angular templates.

C Angular ignores all TypeScript types and compiles components without any checks.

D Type annotations automatically convert input values to the declared types at runtime.

💡 Hint

Think about when TypeScript types are checked versus Angular template rendering.

TypeScript types are used during development to catch errors before running the app. At runtime, Angular does not enforce types; it relies on JavaScript behavior.