Accessing a child component in a parent template via template variables

In this recipe, you’ll learn how to use Angular template reference variables to access a child component in the 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 app that we are going to work with resides in start/apps/chapter01/cc-template-vars inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve cc-template-vars
   

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

   

   Figure 1.14: The cc-template...