Our AppComponent class is the owner of our entire application. It renders the HTML used for the entire page, which includes the navbar, sidenav, rightscreen, and main panel components. As such, it is also the parent of these sub-components. In other words, all of these components are children of the AppComponent class, and are referred to as child components. What we need now is find a way for the AppComponent class to reference the SideNavComponent and RightScreenComponent classes within the class itself. This is to tie in the instances of these classes that are created through the HTML tags, <app-sidenav> and <app-rightscreen>.

Angular provides the @ViewChild property decorator for this purpose. To use this decorator, our AppComponent class needs to be updated, as follows:

import { Component, ViewChild } from '@angular/core'; 
import { SideNavComponent } from './sidenav.component'; 
import { RightScreenComponent } from './rightscreen.component' 
.. @Component ... 
export class AppComponent  
{ 
    @ViewChild(SideNavComponent) 
    private sideNav : SideNavComponent; 
    @ViewChild(RightScreenComponent) 
    private rightScreen: RightScreenComponent; 
    .. the rest of the class ... 

There a few changes that we need to make. Firstly, we need to import the ViewChild decorator from the @angular/core module, and then import the SidenavComponent and RightScreenComponent modules. Secondly, we need to create two private properties, named sideNav and rightScreen, to hold the instances of our child components.

We then use Angular's @ViewChild decorator with the class name that we wish to reference. This means that the @ViewChild(SidenavComponent) function will connect the private sideNav property to the correct instance of the SidenavComponent class.

Similarly, we are asking Angular to connect the instance of the RightscreenComponent class used in our HTML to the private rightScreen variable. In this way, our AppComponent class now has programmatic access to these two classes that were referenced in the HTML.