Signal creation and reading in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a signal in Angular?

A signal is a reactive primitive that holds a value and notifies when the value changes. It helps Angular track and update the UI efficiently.

beginner

How do you create a signal in Angular?

Use the <code>signal()</code> function with an initial value, like <code>const count = signal(0);</code> to create a signal holding the number 0.

beginner

How do you read the current value of a signal?

You read the value by calling the signal as a function, for example, count() returns the current value stored in the signal.

intermediate

What happens when you update a signal's value?

When you update a signal's value by calling it with a new value, Angular automatically updates any UI or computations that depend on that signal.

intermediate

Why are signals useful in Angular?

Signals make it easy to manage state reactively without complex subscriptions. They keep the UI in sync with data changes automatically and efficiently.

How do you create a signal with an initial value of 10?

A const value = createSignal(10);

B const value = new Signal(10);

C const value = signal(10);

D const value = signal.value(10);

Use the signal() function with the initial value inside parentheses.

How do you get the current value stored in a signal named score?

A score.current

B score.value

C score.get()

D score()

Signals are functions; calling score() returns the current value.

What happens when you update a signal's value?

A Angular automatically updates all parts of the UI that use the signal.

B The signal value changes but UI updates only after a page reload.

C Nothing until you manually refresh the UI.

D You must call a separate update function to refresh the UI.

Signals notify Angular to update the UI automatically when their value changes.

Which of these is NOT a way to update a signal's value?

A Calling the signal with a new value like <code>count(5)</code>.

B Assigning directly like <code>count = 5</code>.

C Using a function to update like <code>count.update(v =&gt; v + 1)</code>.

D Using <code>count.set(5)</code>.

You cannot assign directly to the signal variable; you must use its methods or call it as a function.

Why might you choose signals over traditional Angular state management?

A Signals automatically track dependencies and update UI efficiently.

B Signals require more code and setup.

C Signals do not work with Angular templates.

D Signals are only for server-side rendering.

Signals simplify reactive state by tracking dependencies and updating UI automatically.

Explain how to create a signal and read its value in Angular.

Think about how you store and then get the value from a signal.

Describe what happens when you update a signal's value and why it is useful.

Consider how signals help keep your app's display fresh without extra work.