Locale switching in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

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')

A The displayed date updates automatically to the new locale format without reloading the component.

B The displayed date stays the same until the component is manually reloaded.

C Angular throws an error because pipes cannot react to signal changes.

D The date updates only after a full page refresh.

💡 Hint

Think about how Angular signals trigger reactive updates in templates.

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

intermediate

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');

A localeSignal.change('de-DE');

B localeSignal = 'de-DE';

C localeSignal.update('de-DE');

D localeSignal.set('de-DE');

💡 Hint

Signals have a method to update their value explicitly.

The correct method to update a signal's value is .set(newValue). Assigning directly or using non-existent methods causes errors.

🔧 Debug

advanced

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()?

A Because assigning a new signal to this.locale does not update the original signal's value bound in the template.

B Because signals cannot be used in templates directly.

C Because the date pipe does not support locale changes dynamically.

D Because the changeLocale method is missing a call to detectChanges().

💡 Hint

Think about what happens when you assign a new signal to a property versus updating the existing signal's value.

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

advanced

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?

A Angular requires a special locale service to notify pipes about locale changes.

B Angular re-runs the pipe transform function because the signal change triggers a reactive update in the template.

C Angular reloads the entire component to apply the new locale.

D Angular caches the pipe output and ignores locale changes until a manual refresh.

💡 Hint

Consider how signals and reactive templates work together.

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

expert

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?

A it-IT

B en-US

C ja-JP

D es-ES

💡 Hint

Signals hold a single value and each set overwrites the previous one.

Each call to .set() replaces the signal's value. The last call sets it to 'ja-JP', so the template shows 'ja-JP'.