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.

Practice

1. What is the main purpose of using type annotations in Angular component properties?

easy

A. To specify the kind of data a property holds for better code clarity and error checking

B. To make the component run faster in the browser

C. To automatically generate HTML templates

D. To style the component with CSS

Solution

1. Step 1: Understand what type annotations do

   Type annotations tell Angular and TypeScript what kind of data a property should hold, like string or number.

2. Step 2: Identify the benefit of type annotations

   This helps catch mistakes early and makes the code easier to read and maintain.

3. Final Answer:

   To specify the kind of data a property holds for better code clarity and error checking -> Option A

4. Quick Check:

   Type annotations improve clarity and error checking = D [OK]

Hint: Type annotations describe data types to avoid mistakes [OK]

Common Mistakes:

• Thinking type annotations affect runtime speed
• Confusing type annotations with styling or templates
• Believing type annotations generate HTML automatically

2. Which of the following is the correct way to add a type annotation for a string property named title in an Angular component?

easy

A. title = string;

B. string: title = 'Hello';

C. title: string = 'Hello';

D. title => string = 'Hello';

Solution

1. Step 1: Recall correct TypeScript syntax for type annotations

   The syntax is propertyName: type = value;, so the property name comes first, then colon, then type.

2. Step 2: Match the syntax to the options

   title: string = 'Hello'; matches this pattern exactly: title: string = 'Hello';

3. Final Answer:

   title: string = 'Hello'; -> Option C

4. Quick Check:

   Correct syntax is property: type = value [OK]

Hint: Remember: propertyName: type = value; [OK]

Common Mistakes:

• Putting type before property name
• Using = string instead of : string
• Using arrow => instead of colon :

3. Consider this Angular component code snippet:

export class MyComponent {
  count: number = 5;
  name: string = 'Angular';
  isActive: boolean = true;
}

What will be the type of isActive property?

medium

A. any

B. string

C. number

D. boolean

Solution

1. Step 1: Look at the type annotation of isActive

   The code shows isActive: boolean = true;, so the type is boolean.

2. Step 2: Confirm the assigned value matches the type

   The value true is a boolean, matching the annotation.

3. Final Answer:

   boolean -> Option D

4. Quick Check:

   Property is annotated as boolean = A [OK]

Hint: Check the type after colon for property type [OK]

Common Mistakes:

• Confusing value type with property type
• Assuming default type is any without annotation
• Mixing up boolean and string types

4. Identify the error in this Angular component property declaration:

export class SampleComponent {
  age: number = 'twenty';
}

medium

A. Type mismatch: assigning string to a number type

B. No error, this is valid code

C. Missing semicolon at the end

D. Property name cannot be 'age'

Solution

1. Step 1: Check the type annotation and assigned value

   The property age is annotated as number but assigned the string 'twenty'.

2. Step 2: Understand TypeScript type rules

   Assigning a string to a number type causes a type mismatch error.

3. Final Answer:

   Type mismatch: assigning string to a number type -> Option A

4. Quick Check:

   Type mismatch error = A [OK]

Hint: Match assigned value type with annotation type [OK]

Common Mistakes:

• Ignoring type mismatch errors
• Thinking semicolon omission causes error here
• Assuming property names are restricted

5. You want to create an Angular component property items that holds an array of strings. Which is the correct type annotation and initialization?

hard

A. items: Array = ['apple', 'banana', 'cherry'];

B. items: string[] = ['apple', 'banana', 'cherry'];

C. items: [string] = ['apple', 'banana', 'cherry'];

D. items: string = ['apple', 'banana', 'cherry'];

Solution

1. Step 1: Recall correct syntax for array type annotation in TypeScript

   Arrays of strings are annotated as string[] or Array<string>. items: string[] = ['apple', 'banana', 'cherry']; uses string[].

2. Step 2: Check initialization matches the type

   The value is an array of strings, matching the annotation.

3. Final Answer:

   items: string[] = ['apple', 'banana', 'cherry']; -> Option B

4. Quick Check:

   Array of strings uses string[] = B [OK]

Hint: Use string[] for array of strings [OK]

Common Mistakes:

• Using Array without type parameter
• Using tuple syntax [string] incorrectly
• Assigning array to string type