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;