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:
- Open the project in Visual Studio Code.
- Open the terminal and run
npm installto install the dependencies of the project. - 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
- Click...