asp.net core docker 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.

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
https://www.youtube.com/playlist?list...

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
https://www.youtube.com/c/KudvenkatAr...

asp.net core docker Call child component methods and properties using template reference variable
141 Likes	141 Dislikes
25,173 views views	524K followers
Science & Technology	Upload TimePublished on 3 Apr 2018

Related keywords

ajax meaning,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,ajax fc,ajax players,server jobs nyc,asp.net core swagger,credit karma,mvc design pattern,asp.net machine account,server error in '/' application,servers for minecraft,asp.net core dependency injection,asp.net core 3.0,calculator,ajax ontario,asp.net mvc tutorial,asp.net core 3 release date,server job description,asp.net cos'è,mvc hours,asp.net core web api,ajax jquery,craigslist ny,ajax call,asp.net core 2. guida completa per lo sviluppatore,asp.net core,server pro,server status ffxiv,asp.net zero,cheap flights,server memes,asp.net core hosting,chase,serverless architecture,server resume,server books,mvcc connect,college football,ajax deadpool,server jobs,cvs,cnn,mvc tutorial,costco hours,asp.net web api,server side rendering,serverless,mvc nj,asp.net core download,cool math games,citibank,asp.net core identity,ajax parking,asp.net core logging,mvconnect,cunyfirst,ajax post,asp.net guida,ajax jersey,asp.net core razor pages,server duties,asp.net core environment variables,http://asp.net,server 2019,chernobyl,century 21,serverminer,ajax cleaner,mvcsd,mvcsc,asp.net core configuration,ajax marvel,asp.net tutorial,asp.net mvc,mvc medical,asp.net core tutorial,ajax roster,mvc architecture,mvc2,asp.net core mvc,ajax soccer,chase online,server hosting,costco,server jobs near me,ajax dish soap,capital one,server rack,craigslist,ajax tavern,ajax javascript,ajax request,asp.net core 2.2,asp.net core signalr,mvc framework,ajax paving,mvc near me,ajax greek,mvc pattern,asp.net identity,mvcu,asp.net core middleware,mvc map,asp.net download,mvc webadvisor,mvcc,mvci,mvctc,