Input signals and model signals in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an input signal in Angular standalone components?

An input signal is a reactive value passed from a parent component to a child component, allowing the child to react to changes automatically.

beginner

How do model signals differ from input signals in Angular?

Model signals are signals defined inside a component to hold and manage its own reactive state, while input signals come from outside the component.

beginner

Which Angular function is used to create a model signal?

The `signal()` function is used to create a model signal inside a component to hold reactive data.

intermediate

How do you declare an input signal in an Angular standalone component?

Use the `input()` function imported from `@angular/core`, for example: `count = input(0);` or `count = input.required<number>();` to receive a reactive input signal.

intermediate

Why are signals preferred over traditional inputs for reactive data flow in Angular?

Signals provide automatic reactivity and better performance by tracking dependencies and updating only when needed, unlike traditional inputs which require manual change detection.

What does an input signal in Angular represent?

A A lifecycle hook in Angular

B A method to fetch data from a server

C A CSS style applied to a component

D A reactive value passed from parent to child component

Input signals are reactive values passed from a parent component to a child component.

Which function creates a model signal inside an Angular component?

A createSignal()

B signal()

C useState()

D setSignal()

The `signal()` function is used to create model signals in Angular.

How do you mark a property as an input signal in Angular?

A @Output()

B @Model()

C input()

D @Signal()

The `input()` function marks a property as an input signal.

What is a key benefit of using signals for inputs in Angular?

A They automatically update when data changes

B They disable change detection

C They make components slower

D They require manual event listeners

Signals automatically update components when their data changes, improving reactivity.

Where are model signals typically defined in Angular?

A Inside the component to hold its own state

B In the parent component only

C In the Angular module file

D In the CSS stylesheet

Model signals are defined inside the component to manage its own reactive state.

Explain how input signals and model signals work together in an Angular component.

Think about data flow from outside to inside the component.

Describe the steps to create and use an input signal in an Angular standalone component.

Focus on how data is passed and used reactively.