Implementing a Custom Injection Token in Angular

Angular's dependency injection system is powerful, but sometimes you need more control over how dependencies are provided. This challenge focuses on creating and utilizing a custom injection token to provide a specific value or service, demonstrating a more advanced use of Angular's DI capabilities. This is useful for abstracting dependencies, providing configuration values, or injecting different implementations based on environment.

Problem Description

You are tasked with creating an Angular application that utilizes a custom injection token to provide a configuration object. This configuration object will contain a theme property, which can be either 'light' or 'dark'. You need to create a service that retrieves this configuration from the injection token and uses the theme property to apply styling to the application. The application should display a message indicating the current theme.

Key Requirements:

• Create a Custom Injection Token: Define a custom injection token named AppConfig.
• Provide a Configuration Value: Provide a value for the AppConfig token in a module (e.g., AppModule) that includes a theme property.
• Create a Service: Create a service named ThemeService that injects the AppConfig token.
• Use the Configuration: Within the ThemeService, access the theme property from the injected AppConfig value.
• Apply Styling (Simulated): The ThemeService should log a message to the console indicating the current theme. (For simplicity, actual styling application is not required; just the logging of the theme).
• Display the Theme: Create a component that injects the ThemeService and displays the current theme in its template.

Expected Behavior:

When the application runs, the ThemeService should log the theme (either 'light' or 'dark') to the console. The component should display the same theme value in its template.

Edge Cases to Consider:

• What happens if the AppConfig token is not provided? (The service should handle this gracefully, perhaps by using a default theme).
• How can you easily switch between themes without modifying the configuration provider? (Consider how the configuration could be updated dynamically).

Examples

Example 1:

Input: AppConfig provided with theme: 'light'
Output: Console log: "Current theme: light"
Component Display: "Current theme: light"
Explanation: The ThemeService successfully retrieves the 'light' theme from the AppConfig token and displays it.

Example 2:

Input: AppConfig provided with theme: 'dark'
Output: Console log: "Current theme: dark"
Component Display: "Current theme: dark"
Explanation: The ThemeService successfully retrieves the 'dark' theme from the AppConfig token and displays it.

Example 3: (Edge Case)

Input: AppConfig is not provided.
Output: Console log: "Current theme: default"
Component Display: "Current theme: default"
Explanation: The ThemeService handles the missing AppConfig by using a default theme ('default').

Constraints

• The application must be a functional Angular application.
• The theme property in the configuration object must be a string.
• The ThemeService should handle the case where AppConfig is not provided.
• The solution should be well-structured and follow Angular best practices.
• No external libraries are allowed beyond standard Angular libraries.

Notes

• Consider using InjectionToken from @angular/core to define your custom token.
• Think about how to make the configuration easily configurable without modifying the application's code directly.
• The console logging and component display are sufficient for demonstrating the functionality; actual styling implementation is not required.
• Error handling is not explicitly required, but graceful handling of missing configurations is expected.