Call child component methods and properties using template reference variable

In this video we will discuss how to call child component methods and properties from parent component. One way to do this is by using output properties. We discussed output properties in Part 37 of Angular CRUD tutorial. Another way, to pass data from the child component to the parent component is by using a template reference variable. Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.    / @aarvikitchen5572   Let us understand this with an example. We want to do the same thing that we did with Output properties in Part 37. The child component DisplayEmployeeComponent is responsible for displaying each Employee details in a Bootstrap Panel. Here is what we want to do. When we click on any of the employee panel we want to display that employee name and gender. So we need to pass employee name and gender from the child component (DisplayEmployeeComponent) to parent component (ListEmployeesComponent). Here is the child component class. Notice the class has employee property and getNameAndGender() method. We will be calling both of these from the parent component (ListEmployeesComponent) using a template reference variable. export class DisplayEmployeeComponent { @Input() employee: Employee; getNameAndGender(): string { return this.employee.name + ' ' + this.employee.gender; } } Code in Parent Component View Template (list-employees.component.html) <h1 #h1Variable></h1> <div *ngFor="let employee of employees"> <div (click)="h1Variable.innerHTML = childComponent.getNameAndGender()"> <app-employee-display [employee]="employee" #childComponent> </app-employee-display> </div> </div> Code Explanation : #childComponent is the template reference variable to the child component. Using this template variable we can call child component public property (employee) and method (getNameAndGender()) <div (click)="handleClick(childComponent.getNameAndGender())">. Using the template reference variable we are calling the child component method getNameAndGender(). The value this method returns is assigned to the innerHTML property of the <h1> element. #h1Variable is the template reference variable for <h1> element. At this point when you click on an employee panel, you will see that employee's name and gender displayed by the <h1> element. Calling the child component property using template reference variable : Notice in the example below, we are calling the child component public property employee using the template reference variable childComponent. <h1 #h1Variable></h1> <div *ngFor="let employee of employees"> <div (click)="h1Variable.innerHTML = childComponent.employee.name + ' ' + childComponent.employee.gender"> <app-employee-display [employee]="employee" #childComponent> </app-employee-display> </div> </div> Even now, when you click on an employee panel, you will see that employee's name and gender displayed by the <h1> element exactly the same way as before. Summary : There are 2 ways to pass data from Child Component to Parent Component 1. Output Properties 2. Template Reference Variable With Output properties there are several moving parts. In the child component we need to create a custom event. Raise the custom event. From the parent component bind to the child component event and handle it. With the template reference variable approach, we do not have so many moving parts. We just declare a template reference variable and use it to call the child component public properties and methods. Text version of the video http://csharp-video-tutorials.blogspo... Slides http://csharp-video-tutorials.blogspo... Angular CRUD Tutorial    • Angular CRUD tutorial   Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspo... All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenka... All Dot Net and SQL Server Tutorials in Arabic    / kudvenkatarabic