Type annotations in components in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of type annotations in Angular components?

Type annotations help Angular and TypeScript understand what kind of data a variable or property holds. This makes the code safer and easier to read, like labeling boxes so you know what's inside.

beginner

How do you add a type annotation to a component property in Angular?

You add a colon and the type after the property name. For example: name: string; means the property name must hold text.

intermediate

Why is it helpful to use type annotations for @Input properties?

Type annotations tell Angular what type of data the component expects from its parent. This helps catch mistakes early, like sending a number when text is expected.

intermediate

What type would you use to annotate a property that can hold either a number or null?

You use a union type like number | null. This means the property can be a number or it can be empty (null).

beginner

How do type annotations improve teamwork in Angular projects?

They make the code clearer for everyone. When types are clear, teammates understand what data is expected without guessing, reducing bugs and confusion.

Which syntax correctly adds a type annotation for a string property called 'title' in an Angular component?

A string title;

B title = string;

C title: string;

D title -> string;

In TypeScript, the correct syntax is propertyName: type; so title: string; is correct.

What does the type annotation number | null mean for a component property?

A The property can only be a number.

B The property can be any type.

C The property must be both number and null at the same time.

D The property can be a number or empty (null).

The union type number | null means the property can hold either a number or null.

Why should you add type annotations to @Input properties in Angular?

A To tell Angular what type of data to expect from the parent.

B To make the component load faster.

C To hide the property from other components.

D To automatically convert data types.

Type annotations on @Input properties help Angular and developers know what data type the component expects.

Which of these is NOT a benefit of using type annotations in Angular components?

A Automatically fix bugs at runtime.

B Make code easier to understand.

C Catch errors early during coding.

D Help teammates know expected data types.

Type annotations help catch errors before running code but do not fix bugs automatically at runtime.

How do you annotate a property that holds a list of strings in an Angular component?

A items: array<string>;

B items: string[];

C items: list<string>;

D items: string;

The correct TypeScript syntax for an array of strings is string[].

Explain how type annotations help improve code safety and clarity in Angular components.

Think about how labeling things helps avoid mistakes.

Describe how to add type annotations to component properties and @Input properties in Angular.

Remember the syntax: propertyName: type;

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