Hone logo
Hone
Problems

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 Component class with a single property (e.g., message: string). This property will be the data we bind to.
  • CoreModule Class: Create a CoreModule class that takes a Component instance as input during its construction.
  • Data Binding: The CoreModule should provide a method (updateMessage) that allows external code to modify the component's message property.
  • Change Detection (Simplified): When updateMessage is called, the CoreModule should 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 Component should have an init method that is called when the CoreModule is instantiated. This method should initialize the message property to a default value.

Expected Behavior:

  1. When a CoreModule is created with a Component, the component's init method should be called.
  2. Calling updateMessage on the CoreModule should update the component's message property and trigger the simplified change detection (console log).
  3. The component's message property should reflect the latest value after calling updateMessage.

Edge Cases to Consider:

  • What happens if updateMessage is called before CoreModule is 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 CoreModule should 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 init method 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.
Loading editor...
typescript