Angular ViewChild Implementation Challenge

This challenge focuses on implementing and utilizing Angular's ViewChild decorator to access and interact with a child component or element from a parent component. Understanding ViewChild is crucial for building dynamic and interactive Angular applications where parent components need to control or retrieve data from their children. You'll be creating a simple component that uses ViewChild to access a child component's method.

Problem Description

You are tasked with creating two Angular components: a parent component (AppComponent) and a child component (ChildComponent). The ChildComponent has a method called showAlert() that displays an alert message. The AppComponent needs to be able to call the showAlert() method on the ChildComponent when a button in the parent component is clicked.

What needs to be achieved:

1. Create a ChildComponent with a method showAlert() that displays a simple alert message (e.g., "Alert from Child Component!").
2. Create an AppComponent that contains a button.
3. Use Angular's ViewChild decorator in the AppComponent to access an instance of the ChildComponent.
4. When the button in the AppComponent is clicked, call the showAlert() method on the accessed ChildComponent.

Key Requirements:

• The ChildComponent must be properly defined and functional.
• The AppComponent must correctly use ViewChild to obtain a reference to the ChildComponent.
• The button click event in the AppComponent must trigger the showAlert() method in the ChildComponent.
• The alert message should be displayed when showAlert() is called.

Expected Behavior:

When the user clicks the button in the AppComponent, an alert box should appear displaying the message "Alert from Child Component!".

Edge Cases to Consider:

• Ensure the ChildComponent is properly initialized before attempting to access it via ViewChild. Consider using AfterViewInit lifecycle hook.
• Handle the case where the ChildComponent might not be present in the DOM (though unlikely in this simple scenario, it's good practice to think about).

Examples

Example 1:

Input: User clicks the button in AppComponent.
Output: An alert box appears with the message "Alert from Child Component!".
Explanation: The AppComponent's button click event triggers the call to ChildComponent's showAlert() method via the ViewChild reference.

Example 2:

Input: AppComponent loads, but the button is never clicked.
Output: No alert box appears.
Explanation: The showAlert() method is never called, so no alert is displayed.

Constraints

• The solution must be written in TypeScript.
• Use standard Angular practices and decorators.
• The alert message should be a simple JavaScript alert (e.g., alert('message')).
• The solution should be functional and demonstrate the correct usage of ViewChild.
• The solution should be relatively concise and easy to understand.

Notes

• Remember to import the necessary modules and decorators from Angular.
• Consider using the AfterViewInit lifecycle hook in the AppComponent to ensure the ChildComponent is fully initialized before accessing it via ViewChild.
• The ViewChild decorator can be used with a selector (component class) or a template reference variable (element). This challenge focuses on using it with a selector.
• Think about how to properly type the ViewChild property to ensure type safety.