Passing values using @ViewChild Angular 4:
@ViewChild in angular is mainly to communicate between parent and child components. Because a component will have access only to its own template files. We have few more components like @Input and @Output for the same. Today we are going to see actually how to pass a value within a same component itself using @ViewChild instead of two way databinding.
Table of Contents
Steps in Overview:
1. Import ViewChild and ElementRef from @angular/core.
2. Add a decorator @ViewChild with component name / template reference name as a argument to the typescript variable.
3. Access the input text values using nativeElement.value method.
Side Note:
Just print console.log(ElementRef) to see all the available methods of ElementRef, you can print for any component in angular to list its methods and properties.
This simple app just adds technology name and technology description to the array and the same array iterated and printed in the same page. This app is already created using property binding, event binding and two way binding. In the same app I just replaced two way binding with @ViewChild local Reference variable.
Have a quick look at:
Angular 4/5/6 Event Binding + Two Way Databinding Simple Example
Component [Typescript File]:
- ViewChild and ElementRef imported from @angular/core.
- @ViewChild decorator added to variables with reference as a argument. [You can also add the component name].
[html]
import { Component,ViewChild,ElementRef } from ‘@angular/core’;
export class AppComponent {
@ViewChild(‘tech_name’) techName: ElementRef;
@ViewChild(‘tech_description’) techDesc: ElementRef;
technologies = [];
addTechName(){
this.technologies.push({
type:’tech’,
techname: this.techName.nativeElement.value,
techdesc: this.techDesc.nativeElement.value
});
}
}
[/html]
Template [HTML File]:
- #tech_name and #tech_description’s are the local references.
- The same only used as a argument in the @ViewChild component.
With local Reference: [Used in this post]
[html]
<label for=”techN”> Enter Technology Name </label>
<input type=”text” #tech_name id=”techN”>
<label for=”techD”> Enter Technology Description </label>
<input type=”text” #tech_description id=”techD”>
[/html]
With two way binding:
[html]
<label for=”techN”> Enter Technology Name </label>
<input type=”text” [(ngModel)] = “techName” id=”techN”>
<label for=”techD”> Enter Technology Description </label>
<input type=”text” [(ngModel)] = “techDesc” id=”techD”>
[/html]
Now we have replaced two way binding with local reference in this post. But still no difference in our output.
@ViewChild is actually available to use between component connections. Here we learn how to use to pass the input text values to component instead of two way binding.
Output Screenshots:
