Fetching Property in Angular 7

Question

I want to use the property of the input element when form is submitted. I read the concept of Template reference variable which helps in achieving this case in Angular.

When i assign 'id' attribute of input element with a value and later when i tried fetching, it throws an error. It allows only template reference variable to extract the property.

Why not we access the property of the input element by directly invoking its ID attribute

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  // templateUrl: './test.component.html',
  template : `
  <input type="text" id = "{{idOne}}"  #idTwo/>
  <button type="text" (click) = 
handleClickEvent(id.value)>Submit</button>

<button type="text" (click) = handleClickEvent(idTwo.value)>Submit 
Again</button>`,
  styles: [`p {color : red}`]
})
export class TestComponent implements OnInit {

  handleClickEvent = (value : string) =>{
    console.log(value);
  }

  public idOne = "testID";
  constructor() { }

  ngOnInit() {
  }

}

When i submit 1st button (which invokes ID directly), it throws error saying

cannot read value of undefined.

When i submit 2nd button, it prints correct value that i inputted.

So my question is

Is template reference variable the only way to fetch the property of the HTML element ?

Can you not fetch the property in a traditional way (directly calling id property) ?

Can you clarify what it is you are trying to accomplish? Nothing in this code appears to follow Angular conventions, so we need to take a step back and rethink the whole approach. — theMayer, Jun 01 '19 at 13:50
I am newbie to Angular. Here, I am trying to retrieve the value that user entered. Usually in JS, we do "document.getElementById("id").value" to retrieve the values within the input element. Here I am trying to replicate the same in angular. I found that this can be achieved by "template reference variable(TRV)". By giving "#something" in input element. We can retrieve the value of input element by TRV. But why not we directly retrieve the value by getting the "id" of the element(using id attribute of input element and then pulling the value from that - traditional approach) ? — Venkateswaran, Jun 01 '19 at 14:30
No, that's not the Angular approach. I recommend reading the [Tour of Heroes](https://angular.io/tutorial) tutorial to see how this would be done in Angular. — theMayer, Jun 01 '19 at 15:26

score 1 · Answer 1 · answered Jun 01 '19 at 15:34

Using JavaScript on DOM elements directly is not generally something that is necessary in Angular.

You need to adjust your code as follows:

In the component class, declare your properties for binding on the template
Create a click handler for the button

Component

export class TestComponent {

  idVal = 'testID';  

  submit(): void {
    // Not sure what needs to happen here.
  }    

  submitAgain(): void {
    // Not sure what needs to happen here.
  }    

  constructor() { }
}

Then, in your template, bind the input field to the the property, and the click handler to the button.

Template

<input type="text" [(ngModel)]="idVal" />

<button type="text" (click)="submit()">Submit</button>    
<button type="text" (click)="submitAgain()">Submit Again</button>

Rules

Don't use DOM to store/retrieve values from form fields. That is what ngModel is for.
Don't pass arguments in to event handler methods. The data needed for event handlers should be contained as property values on the component.

Fetching Property in Angular 7

1 Answers1