Angular Core Module Implementation Challenge
This challenge focuses on building a simplified version of Angular's core module, specifically the functionality related to component creation and lifecycle management. Understanding this process is fundamental to grasping how Angular applications function, and this exercise will solidify your knowledge of component instantiation, data binding, and change detection.
Problem Description
Your task is to implement a rudimentary CoreModule that can create and manage a single component. This module should handle the component's initialization, data binding (a single property), and a simplified change detection mechanism. The module will provide a method to update the component's data, and the component should react to this update by displaying the new value. The goal is to simulate the core aspects of Angular's component lifecycle and data binding without relying on the full Angular framework.
Key Requirements:
- Component Class: Define a
Componentclass with a single property (e.g.,message: string). This property will be the data we bind to. - CoreModule Class: Create a
CoreModuleclass that takes aComponentinstance as input during its construction. - Data Binding: The
CoreModuleshould provide a method (updateMessage) that allows external code to modify the component'smessageproperty. - Change Detection (Simplified): When
updateMessageis called, theCoreModuleshould trigger a simplified change detection mechanism. This mechanism should simply log a message to the console indicating that the component has been updated. (No actual DOM manipulation is required for this challenge). - Initialization: The
Componentshould have aninitmethod that is called when theCoreModuleis instantiated. This method should initialize themessageproperty to a default value.
Expected Behavior:
- When a
CoreModuleis created with aComponent, the component'sinitmethod should be called. - Calling
updateMessageon theCoreModuleshould update the component'smessageproperty and trigger the simplified change detection (console log). - The component's
messageproperty should reflect the latest value after callingupdateMessage.
Edge Cases to Consider:
- What happens if
updateMessageis called beforeCoreModuleis fully initialized? (While not strictly required to handle this perfectly, consider how your code behaves). - How would you extend this to handle multiple data bindings or more complex change detection? (Think about the design, not necessarily implement it).
Examples
Example 1:
Input:
- Create a CoreModule with a Component.
- Call updateMessage("Hello, World!")
Output:
- Console log: "Component updated!"
- Component.message = "Hello, World!"
Explanation: The CoreModule receives the message and updates the component's property, triggering the change detection mechanism.
Example 2:
Input:
- Create a CoreModule with a Component.
- Call updateMessage("Goodbye!")
- Call updateMessage("Hello again!")
Output:
- Console log: "Component updated!" (twice)
- Component.message = "Hello again!"
Explanation: Each call to updateMessage triggers a change detection and updates the component's message property.
Constraints
- No external Angular libraries: You are not allowed to use any Angular libraries or modules beyond the core TypeScript language features.
- Single Component: The
CoreModuleshould only manage a single component instance. - Simplified Change Detection: The change detection mechanism only needs to log a message to the console. No DOM manipulation is required.
- TypeScript: The solution must be written in TypeScript.
Notes
- Think about how you can encapsulate the component's state and lifecycle within the
CoreModule. - Consider the order of operations and how the
initmethod is called. - This is a simplified model. Real Angular change detection is far more complex, involving zones and asynchronous tasks. This challenge focuses on the fundamental concepts.
- Focus on clarity and readability of your code. Good variable names and comments are encouraged.