Accessing a child component in the parent template via template variables

In this recipe, you'll learn how to use Angular template reference variables to access a child component into a parent component's template. You'll start with an app having AppComponent as the parent component and GalleryComponent as the child component. You'll then create a template variable for the child component in the parent's template to access it and perform some actions in the component class.

Getting ready

The project that we are going to work with resides in chapter01/start_here/cc-template-vars 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.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab and you should see something like the following:

   Figure 1.9 – The cc-template-vars app running on http://localhost:4200

4. Click...