Angular Component Initialization with ngOnInit

Angular components often require initialization logic to run when the component is first loaded. The ngOnInit lifecycle hook provides a dedicated place to perform this initialization, ensuring it happens after Angular has fully initialized the component's input properties and view. This challenge asks you to implement a component that utilizes ngOnInit to perform a simple data fetching operation and display it.

Problem Description

You are tasked with creating a simple Angular component called DataDisplayComponent. This component should fetch a predefined array of strings from a mock data source (simulated with a simple array) within the ngOnInit lifecycle hook and store it in a component property called data. After fetching, the component should display this data in its template. The goal is to demonstrate the proper usage of ngOnInit for component initialization.

Key Requirements:

• The component must be an Angular component.
• The component must have a property called data of type string[].
• The ngOnInit lifecycle hook must be implemented.
• Inside ngOnInit, the data property should be populated with a predefined array of strings: ['Item 1', 'Item 2', 'Item 3'].
• The component's template must display the contents of the data array.

Expected Behavior:

When the component is initialized, the ngOnInit hook should execute, populating the data property. The template should then render a list displaying each string from the data array.

Edge Cases to Consider:

• Ensure the component initializes correctly even if there are errors during the simulated data fetching (although error handling is not explicitly required for this challenge, consider how it could be handled in a real-world scenario).
• The data array should only be populated once, during the component's initialization.

Examples

Example 1:

Input: A newly initialized DataDisplayComponent
Output: A list displayed in the template containing:
  - Item 1
  - Item 2
  - Item 3
Explanation: The ngOnInit hook populates the data array, and the template iterates through it to display the items.

Example 2:

Input: A DataDisplayComponent that has already been initialized and is being re-rendered due to a change in a parent component.
Output: The same list as in Example 1.
Explanation: ngOnInit should only run once during the component's lifecycle.  Re-rendering should not trigger it again.

Constraints

• The data fetching should be simulated using a simple array assignment within ngOnInit. No actual HTTP requests are required.
• The component should be written in TypeScript.
• The component should be a functional component.
• The component should use Angular's template syntax for displaying the data.

Notes

• ngOnInit is called only once after data-bound properties of a directive are first checked.
• This is a good place to perform any one-time initialization logic that depends on the component's input properties being set.
• Consider how you would display the data in the template using *ngFor.