Angular Debugging Toolkit: Component Inspector & Data Logger

This challenge focuses on building practical debugging tools within an Angular application. Debugging complex Angular applications can be difficult, and having custom tools to inspect component state and log data flows can significantly improve development efficiency. You will create a component inspector and a data logger to aid in debugging.

Problem Description

You are tasked with creating two Angular components: ComponentInspector and DataLogger.

ComponentInspector: This component should display the properties of the component it's embedded within. It should dynamically detect and display all public properties of the parent component. The display should be updated whenever the parent component's properties change. The inspector should not display inherited properties or private properties.

DataLogger: This component should allow the user to define a list of data sources (strings representing property paths within a component). It should then log the values of these data sources to the console at a configurable interval (in milliseconds). The logging should include the component's name and the property path being logged. The user should be able to add, remove, and start/stop logging for each data source.

Key Requirements:

• Dynamic Property Detection: The ComponentInspector must dynamically detect and display properties without requiring hardcoded property names.
• Change Detection: Both components must react to changes in the parent component's data.
• User Interface: Both components should have a clear and usable user interface. The DataLogger needs controls for adding/removing data sources, setting the logging interval, and starting/stopping logging.
• Error Handling: The DataLogger should gracefully handle invalid property paths (e.g., paths that don't exist on the component). Log an error to the console if a path is invalid.
• Component Communication: The DataLogger should be able to target any component within the application.

Expected Behavior:

• ComponentInspector: When placed within a component, it should immediately display all public properties of that component. Changes to those properties should be reflected in the inspector's display.
• DataLogger: When a data source is added, the component name and property path should be displayed. When logging is started, the component name, property path, and value should be logged to the console at the specified interval. Stopping logging should cease the console output. Adding invalid paths should result in console errors.

Edge Cases to Consider:

• Components with a large number of properties.
• Nested objects within component properties. (The inspector doesn't need to recursively display nested objects, just the top-level properties).
• Data types beyond simple strings and numbers (e.g., arrays, objects).
• Asynchronous property updates.
• Error handling when a property path is invalid.

Examples

Example 1: ComponentInspector

Input: A component with the following public properties:
  name: "MyComponent"
  count: 10
  isActive: true
  message: "Hello, world!"

Output: The ComponentInspector displays:
  name: MyComponent
  count: 10
  isActive: true
  message: Hello, world!

Explanation: The inspector dynamically detects and displays the component's public properties.

Example 2: DataLogger

Input: DataLogger configured with:
  Component: MyComponent
  Property Path: name
  Interval: 1000ms
  Logging Status: Started

Output: Console logs every 1000ms:
  MyComponent: name - "MyComponent"
  MyComponent: name - "MyComponent"
  ...

Explanation: The DataLogger logs the value of the 'name' property of 'MyComponent' every second.

Example 3: DataLogger - Error Handling

Input: DataLogger configured with:
  Component: MyComponent
  Property Path: nonExistentProperty
  Interval: 1000ms
  Logging Status: Started

Output: Console logs immediately:
  Error: Property path 'nonExistentProperty' is invalid for component MyComponent.

Explanation: The DataLogger detects an invalid property path and logs an error to the console.  It does *not* attempt to log the value.

Constraints

• Angular Version: Use Angular 16 or later.
• Component Structure: The ComponentInspector and DataLogger must be implemented as separate Angular components.
• Performance: The ComponentInspector should avoid excessive change detection cycles. The DataLogger should not significantly impact application performance, even with a large number of data sources and a short logging interval. Consider using ChangeDetectionStrategy.OnPush where appropriate.
• No External Libraries: Do not use external libraries for this challenge (e.g., RxJS for the DataLogger). Use standard Angular features.
• Property Access: Access component properties using dependency injection and the Injector service.

Notes

• Consider using Reflector to dynamically get the component's properties in the ComponentInspector.
• For the DataLogger, you can use safeNavigationOperator (?.) to handle potentially undefined properties gracefully.
• Think about how to make the DataLogger reusable across different components. It should not be tightly coupled to a specific component.
• Focus on creating a functional and well-structured solution. UI styling is not a primary concern. Prioritize clarity and maintainability.
• The ComponentInspector does not need to display the type of the property, just its value.