Type annotations in components in Angular - Mini Project: Build & Apply

Type annotations in components

📖 Scenario: You are building a simple Angular component to display user information. To make your code clear and safe, you will add type annotations to the component's properties.

🎯 Goal: Create an Angular standalone component named UserCardComponent with typed properties for userName (string) and userAge (number). This will help Angular and developers understand what kind of data the component expects.

📋 What You'll Learn

Create a standalone Angular component named UserCardComponent

Add a typed property userName of type string

Add a typed property userAge of type number

Use the @Component decorator with a simple template showing the user name and age

💡 Why This Matters

🌍 Real World

Type annotations help developers and tools understand what kind of data components expect, reducing bugs and improving code readability in real Angular projects.

💼 Career

Knowing how to use type annotations in Angular components is essential for writing maintainable and robust code in professional frontend development roles.

1

Create the component skeleton

Create a standalone Angular component named UserCardComponent with the @Component decorator. Include selector as 'app-user-card' and a simple template with <p>User Info</p>.

Angular

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `User Info`
})
export class UserCardComponent {
  // Your code here
}

Need a hint?

Use @Component decorator with selector, standalone, and template properties. Then export the class UserCardComponent.

2

Add typed property for userName

Inside the UserCardComponent class, add a property named userName with the type annotation string and assign it the value 'Alice'.

Angular

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `User Info`
})
export class UserCardComponent {
  // Add userName property with type string and value 'Alice'
}

Need a hint?

Write userName: string = 'Alice'; inside the class to declare the typed property.

3

Add typed property for userAge

Add another property named userAge with the type annotation number and assign it the value 30 inside the UserCardComponent class.

Angular

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `User Info`
})
export class UserCardComponent {
  userName: string = 'Alice';
  // Add userAge property with type number and value 30
}

Need a hint?

Write userAge: number = 30; inside the class to declare the typed property.

4

Update template to show typed properties

Update the template property in the @Component decorator to display the userName and userAge properties using Angular interpolation syntax. The template should show: <p>Name: {{ userName }}</p><p>Age: {{ userAge }}</p>.

Angular

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

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: ``
})
export class UserCardComponent {
  userName: string = 'Alice';
  userAge: number = 30;
}

Need a hint?

Use Angular interpolation {{ }} inside the template string to show the properties.