Recommended
Challenge - 5 Problems
Locale Switching Mastery
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What happens when the locale signal changes?
In Angular 17+, if you use a signal to store the current locale and bind it to a date pipe in the template, what will happen when you update the locale signal value?
Angular
<div>{{ new Date() | date : 'fullDate' : currentLocale() }}</div>
// currentLocale is a signal initialized with 'en-US'
// Later in code: currentLocale.set('fr-FR')Attempts:
2 left
💡 Hint
Think about how Angular signals trigger reactive updates in templates.
✗ Incorrect
Signals in Angular trigger automatic updates in the template when their value changes. Pipes that depend on signals will re-run and update the displayed output accordingly.
📝 Syntax
intermediate1:30remaining
Which code correctly sets the locale signal in Angular 17+?
Given a signal named localeSignal initialized with 'en-US', which option correctly updates it to 'de-DE'?
Angular
import { signal } from '@angular/core'; const localeSignal = signal('en-US');
Attempts:
2 left
💡 Hint
Signals have a method to update their value explicitly.
✗ Incorrect
The correct method to update a signal's value is .set(newValue). Assigning directly or using non-existent methods causes errors.
🔧 Debug
advanced2:30remaining
Why does the locale not update in the template after changing the signal?
You have this Angular component code:
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-date',
template: `
{{ date | date:'longDate':locale() }}
` }) export class DateComponent { locale = signal('en-US'); date = new Date(); changeLocale() { this.locale = signal('fr-FR'); } } Why does the displayed date not update after calling changeLocale()?Attempts:
2 left
💡 Hint
Think about what happens when you assign a new signal to a property versus updating the existing signal's value.
✗ Incorrect
Assigning a new signal to the property replaces the reference but does not notify Angular to update the template. The template still listens to the original signal instance. Instead, you should update the existing signal's value using .set().
🧠 Conceptual
advanced3:00remaining
How does Angular handle locale switching for built-in pipes?
When you switch the locale signal used in Angular's built-in pipes like date or currency, how does Angular ensure the pipes reflect the new locale?
Attempts:
2 left
💡 Hint
Consider how signals and reactive templates work together.
✗ Incorrect
Signals trigger Angular's reactive system to re-evaluate expressions in the template, including pipes. This causes the pipe to run again with the updated locale value.
❓ state_output
expert2:30remaining
What is the output after multiple locale signal updates?
Consider this Angular component snippet:
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-locale-demo',
template: `
{{ locale() }}
` }) export class LocaleDemoComponent { locale = signal('en-US'); updateLocales() { this.locale.set('es-ES'); this.locale.set('it-IT'); this.locale.set('ja-JP'); } } If updateLocales() is called once, what will be displayed in the template?Attempts:
2 left
💡 Hint
Signals hold a single value and each set overwrites the previous one.
✗ Incorrect
Each call to .set() replaces the signal's value. The last call sets it to 'ja-JP', so the template shows 'ja-JP'.