Accessing a child component in a parent component class using ViewChild

In this recipe, you'll learn how to use the ViewChild decorator to access a child component in a parent component's class. You'll start with an app that has AppComponent as the parent component and GalleryComponent as the child component. You'll then create a ViewChild for the child component in the parent's component class to access it and perform some actions.

Getting ready

The project that we are going to work with resides in chapter01/start_here/cc-view-child inside the cloned repository:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project. Once done, run ng serve -o.
3. This should open the app in a new browser tab and you should see something like the following:

   Figure 1.10 – The cc-view-child app running on http://localhost:4200

4. Click the buttons at the top to see the respective console...