Type annotations in components in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a type annotation for the component's title property.

Angular

export class AppComponent {
  title: [1] = 'Hello Angular';
}

Drag options to blanks, or click blank then click option'

Aboolean

Bnumber

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean types for text properties.

Not adding any type annotation.

The title property holds text, so it should be typed as string.

2fill in blank

medium

Complete the code to type the input property correctly.

Angular

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

@Component({
  selector: 'app-child',
  template: '<p>{{name}}</p>'
})
export class ChildComponent {
  @Input() name: [1];
}

Drag options to blanks, or click blank then click option'

Anumber

Bstring

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Typing the input as number or boolean incorrectly.

Leaving the type as any.

The name input is expected to be text, so it should be typed as string.

3fill in blank

hard

Fix the error by adding the correct type annotation for the count property.

Angular

export class CounterComponent {
  count: [1] = 0;
}

Drag options to blanks, or click blank then click option'

Anumber

Bboolean

Cstring

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Typing count as string or boolean.

Not adding any type annotation.

The count property holds a number, so it should be typed as number.

4fill in blank

hard

Fill both blanks to type the event handler method parameters correctly.

Angular

export class ButtonComponent {
  onClick(event: [1], value: [2]) {
    console.log(event, value);
  }
}

Drag options to blanks, or click blank then click option'

AMouseEvent

Bstring

Cnumber

DEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic Event instead of MouseEvent.

Typing value as number instead of string.

The event parameter is a mouse event, so MouseEvent is correct. The value is text, so string fits.

5fill in blank

hard

Fill all three blanks to type the component properties correctly.

Angular

export class ProfileComponent {
  username: [1];
  age: [2];
  isActive: [3] = true;
}

Drag options to blanks, or click blank then click option'

Astring

Bnumber

Cboolean

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up types between properties.

Not adding type annotations.

username is text, so string. age is a number, so number. isActive is true/false, so boolean.