Angular Language Service

This challenge focuses on creating a fundamental building block for internationalization (i18n) in an Angular application: a language service. A well-implemented language service allows your application to dynamically switch between different languages, providing a more accessible and user-friendly experience for a global audience.

Problem Description

Your task is to develop a reusable Angular service that manages the current language of the application and provides translations for text. This service should be capable of loading language-specific translation data and updating the application's display language on demand.

Key Requirements:

1. Language Management: The service must maintain the currently active language.
2. Translation Loading: It should be able to load translation data (e.g., key-value pairs) for different languages.
3. Translation Retrieval: Provide a method to get the translated string for a given key in the current language.
4. Language Switching: Implement a mechanism to change the application's current language.
5. Default Language: Define and utilize a default language if no specific language is set or available.
6. Error Handling: Gracefully handle cases where a translation key is not found for the current language.

Expected Behavior:

• When a component needs to display text, it should use the language service to retrieve the translated string based on a key.
• When the user selects a new language, the language service should update its internal state, and subsequent calls to retrieve translations should reflect the new language.
• If a translation key is missing for the current language, a fallback mechanism (e.g., returning the key itself or a predefined default string) should be in place.

Edge Cases to Consider:

• What happens if translation data for a requested language is not available?
• How will you handle missing translation keys?
• Initial state of the language service when the application first loads.

Examples

Example 1: Basic Translation Retrieval

// Assuming the language service has loaded English translations:
// { "greeting": "Hello", "welcome": "Welcome to our app!" }

// In a component:
const greetingTranslation = languageService.getTranslation('greeting');
// greetingTranslation would be "Hello"

const welcomeTranslation = languageService.getTranslation('welcome');
// welcomeTranslation would be "Welcome to our app!"

Example 2: Switching Language

// Initial state: English loaded
// languageService.getTranslation('greeting') -> "Hello"

// User selects Spanish
languageService.setLanguage('es');

// Assuming Spanish translations are loaded:
// { "greeting": "Hola", "welcome": "¡Bienvenido a nuestra app!" }

// Now, in the same component:
const greetingTranslation = languageService.getTranslation('greeting');
// greetingTranslation would be "Hola"

const welcomeTranslation = languageService.getTranslation('welcome');
// welcomeTranslation would be "¡Bienvenido a nuestra app!"

Example 3: Missing Translation Key

// Assuming English translations:
// { "greeting": "Hello" }

// In a component:
const farewellTranslation = languageService.getTranslation('farewell');
// If 'farewell' is not in the English translations, the output might be:
// "farewell" (returning the key itself as fallback)
// or a predefined default like "N/A"

Constraints

• The language service should be implemented as an Angular Injectable service.
• Translation data can be represented as a simple JavaScript object (key-value pairs).
• Assume translation data can be loaded asynchronously (e.g., fetching from a JSON file), but for this challenge, you can simulate this by pre-loading data or using synchronous loading for simplicity in the initial implementation.
• The service should be designed to be efficient for a moderate number of translation keys and languages.

Notes

• Consider how you will structure your translation data (e.g., separate JSON files per language).
• Think about how components will interact with the service. You might need to provide a mechanism for components to subscribe to language changes if they need to re-render automatically.
• This challenge is a foundation for more complex i18n solutions. Focus on the core functionality of managing and retrieving translations.
• You can leverage Angular's dependency injection system to make your service easily available throughout your application.