Locale switching in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular locale data for French.

Angular

import { registerLocaleData } from '@angular/common';
import [1] from '@angular/common/locales/fr';

registerLocaleData(localeFr);

Drag options to blanks, or click blank then click option'

AlocaleFr

BlocaleEn

ClocaleDe

DlocaleEs

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong locale data like English or German.

Not using the correct variable name for the locale.

You need to import the French locale data as localeFr to register it properly.

2fill in blank

medium

Complete the code to provide the French locale in the Angular module.

Angular

@NgModule({
  providers: [
    { provide: [1], useValue: 'fr-FR' }
  ]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

ALocaleId

BLOCALE_ID

CLocale

DLOCALE

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect token names like 'LocaleId' or 'LOCALE'.

Not providing the locale string in the correct format.

The Angular token to set the locale is LOCALE_ID.

3fill in blank

hard

Fix the error in this code to switch locale dynamically using a service.

Angular

import { Injectable, [1] } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LocaleService {
  constructor(private localeId: string) {}
}

Drag options to blanks, or click blank then click option'

ALOCALE_ID

BLocaleId

CLOCALE

DLocale

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong token names that do not exist.

Not importing the token from the correct package.

You must inject the Angular token LOCALE_ID to access the current locale.

4fill in blank

hard

Fill both blanks to register and provide the Spanish locale in the module.

Angular

import { registerLocaleData } from '@angular/common';
import [1] from '@angular/common/locales/es';

registerLocaleData([2]);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'es-ES' }
  ]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

AlocaleEs

BlocaleFr

ClocaleEn

DlocaleDe

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing locale variables from other languages.

Registering a different locale than imported.

You import and register the Spanish locale data as localeEs.

5fill in blank

hard

Fill all three blanks to create a dictionary of locales and switch locale dynamically.

Angular

locales = {
  'en': [1],
  'fr': [2],
  'de': [3]
};

Drag options to blanks, or click blank then click option'

AlocaleEn

BlocaleFr

ClocaleDe

DlocaleEs

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning wrong locale variables to language codes.

Using locale variables for languages not in the dictionary.

The dictionary maps language codes to their respective locale data variables.