Mastering Angular Lifecycle Hooks

Angular components have a lifecycle, and understanding how to tap into this lifecycle is crucial for managing component behavior, performance, and data flow. This challenge will test your ability to implement and leverage Angular's built-in lifecycle hooks to react to key moments in a component's existence.

Problem Description

Your task is to create an Angular component that demonstrates the use of several core lifecycle hooks: OnInit, OnChanges, DoCheck, OnDestroy, and AfterViewInit. This component will display a piece of data and react to changes in its input properties, as well as perform cleanup when it's destroyed.

Requirements:

1. Component Structure: Create a new Angular component named LifecycleDemoComponent.
2. Input Property: This component should accept an input property named message (type string).
3. Lifecycle Hook Implementation:
   • Implement OnInit to log a message to the console when the component is initialized.
   • Implement OnChanges to log a message to the console whenever the message input property changes.
   • Implement DoCheck to log a message to the console on every change detection cycle.
   • Implement AfterViewInit to log a message to the console once the component's view has been fully initialized.
   • Implement OnDestroy to log a message to the console just before the component is destroyed.
4. Template Display: The component's template should display the current value of the message input property.
5. Parent Component Integration: Create a simple parent component (AppComponent) that hosts the LifecycleDemoComponent. The AppComponent should provide a way to dynamically change the message input property of LifecycleDemoComponent (e.g., via a button or an input field) to trigger the OnChanges hook.

Expected Behavior:

• When the LifecycleDemoComponent is first rendered, you should see console logs for OnInit, DoCheck (multiple times), and AfterViewInit.
• When the message input property is updated from the parent, you should see console logs for OnChanges, DoCheck (multiple times).
• When the LifecycleDemoComponent is removed from the DOM (e.g., by navigating away or conditionally rendering it to false), you should see a console log for OnDestroy.

Examples

Example 1: Initial Rendering

• Scenario: The LifecycleDemoComponent is rendered for the first time in AppComponent.
• Input: message input property is set to "Hello Angular!".
• Output (Console Logs):

  LifecycleDemoComponent: Initialized (OnInit)
  LifecycleDemoComponent: Change detected (DoCheck)
  LifecycleDemoComponent: Change detected (DoCheck)
  LifecycleDemoComponent: View Initialized (AfterViewInit)
  

  (Note: The number of DoCheck logs might vary slightly depending on Angular's internal change detection processes.)
• Explanation: OnInit fires once after the initial data-bound properties are set. DoCheck fires during every change detection cycle. AfterViewInit fires after the component's view and child views are fully initialized.

Example 2: Input Property Change

• Scenario: The user interacts with AppComponent (e.g., clicks a button) to change the message input property of LifecycleDemoComponent from "Hello Angular!" to "Updated Message!".
• Input: message input property changes.
• Output (Console Logs):

  LifecycleDemoComponent: Message input changed (OnChanges)
  LifecycleDemoComponent: Change detected (DoCheck)
  LifecycleDemoComponent: Change detected (DoCheck)
  

• Explanation: OnChanges fires when any data-bound input property changes. DoCheck continues to fire in subsequent change detection cycles.

Example 3: Component Destruction

• Scenario: The LifecycleDemoComponent is removed from the DOM (e.g., by using *ngIf to conditionally hide it).
• Input: Component is destroyed.
• Output (Console Logs):

  LifecycleDemoComponent: Destroying component (OnDestroy)
  

• Explanation: OnDestroy is called just before Angular destroys the component and its associated views. This is where cleanup logic should be placed.

Constraints

• The solution must be implemented in TypeScript.
• All logging should be done using console.log() with clear, descriptive messages indicating which hook is firing and relevant information (e.g., new value of message).
• The parent component (AppComponent) should be minimal, focusing on providing and updating the message input.

Notes

• Consider the order in which these hooks are called.
• DoCheck is a powerful hook but can be invoked frequently; use it judiciously for tasks that need to be checked on every change detection cycle.
• OnChanges receives a SimpleChanges object, which contains information about which properties have changed.
• OnDestroy is the perfect place to unsubscribe from observables, clear timers, or perform any other necessary cleanup to prevent memory leaks.
• You will need to import the necessary lifecycle hook interfaces from @angular/core.