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
}

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'
}

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
}

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;
}

Hint

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

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