ViewChild - Access child component, template Reference variable

A component may contain in the template 

• Child component
• Template Reference variable 
• Directive

In order to access to the above elements, we use viewchild. In the below example, it is described how to call a function of child component from parent component and how to access the value of template reference variable and use it in typescript.

Child component

product.component.html

<button (click)="onSubmit()"></button>

<product-details></product-details>

product.component.ts

@ViewChild(ProductDetails) productDetails:ProductDetails

onSubmit(){

    productDetails.submit();

}

Template Reference variable

product.component.html

<button (click)="onSubmit()"></button>

<input type="text" #productName></product-details>

product.component.ts

@ViewChild("productName") productName:any

onSubmit(){

    console.log(this.productName.nativeElement.value);

}