Angular Lifecycle Hook Implementation Challenge

Angular components have a well-defined lifecycle, from creation to destruction. Understanding and utilizing lifecycle hooks allows you to precisely control component behavior at different stages, enabling tasks like data initialization, DOM manipulation, and resource cleanup. This challenge focuses on implementing several key Angular lifecycle hooks to demonstrate their functionality.

Problem Description

You are tasked with creating an Angular component that utilizes several lifecycle hooks to perform specific actions. The component should display a counter that increments every second. The lifecycle hooks you must implement are:

• ngOnInit: Initialize the counter to 0 and start the timer.
• ngOnChanges: Log a message to the console whenever any input property changes.
• ngDoCheck: Log a message to the console every time the change detection runs.
• ngAfterViewInit: Log a message to the console after the view (and child views, if any) has been fully initialized.
• ngOnDestroy: Stop the timer and log a message to the console when the component is destroyed.

The component should also accept an optional input property called initialValue which, if provided, should be used to initialize the counter instead of 0.

Key Requirements:

• The component must be a functional Angular component.
• All specified lifecycle hooks must be implemented correctly.
• The counter should increment every second and be displayed in the template.
• The timer must be stopped when the component is destroyed to prevent memory leaks.
• The console logging must be clear and informative, indicating which hook is being triggered.

Expected Behavior:

1. When the component is initialized, the counter should start at initialValue (or 0 if not provided) and increment every second.
2. ngOnInit should log "ngOnInit called".
3. ngOnChanges should log "ngOnChanges called" whenever the initialValue input changes.
4. ngDoCheck should log "ngDoCheck called" every change detection cycle.
5. ngAfterViewInit should log "ngAfterViewInit called" after the view is initialized.
6. When the component is destroyed, ngOnDestroy should log "ngOnDestroy called" and the timer should be stopped.

Examples

Example 1:

Input: No input properties provided.
Output: Counter starts at 0, increments every second. Console logs: "ngOnInit called", "ngDoCheck called" (repeatedly), "ngAfterViewInit called".
Explanation: The component initializes with the default counter value of 0 and starts the timer.

Example 2:

Input: initialValue = 10
Output: Counter starts at 10, increments every second. Console logs: "ngOnInit called", "ngDoCheck called" (repeatedly), "ngAfterViewInit called".
Explanation: The component initializes with the provided `initialValue` of 10.

Example 3: (Edge Case)

Input: initialValue = 5, then later initialValue changes to 20.
Output: Counter starts at 5, increments every second. Console logs: "ngOnInit called", "ngDoCheck called" (repeatedly), "ngAfterViewInit called", "ngOnChanges called" (when initialValue changes to 20).
Explanation: Demonstrates the `ngOnChanges` hook being triggered when an input property changes.

Constraints

• The component must be written in TypeScript.
• Use Angular version 14 or higher.
• The counter increment should be visually displayed in the component's template.
• The timer should be implemented using setInterval.
• The component should not use any external libraries.
• The component should be relatively simple and focused on demonstrating the lifecycle hooks.

Notes

• Consider using a simple template to display the counter value.
• Pay close attention to the order in which the lifecycle hooks are called.
• Ensure that the timer is properly stopped in ngOnDestroy to avoid memory leaks.
• The ngDoCheck hook is called frequently, so keep the logic within it lightweight to avoid performance issues. The purpose here is to demonstrate its existence, not to perform complex calculations.
• Think about how to best utilize the ngOnChanges hook to react to changes in the input properties.