How to Retrieve Specific Value from HTML using Angular

Question

Goal:
Retrieve value from the id that is located in the syntax code "Tr" and also retrieve from the value in the textbox name "databox".

The process to retrieve the both of the value take place when you have pressed the button "retrieve".

Problem:
How should I retrieve both of the value from html page when you have pressed the button "retrieve data".

What approach should I go for?

I also don't know how how to retrieve of the id inside of the syntax code "tr".

Stackblitz:
https://stackblitz.com/edit/angular-274dah

Thank you!

score 0 · Accepted Answer · answered Dec 31 '19 at 09:44

You can pass the item object and input ref to the submit function as follows:

    <tr id="{{ item.id }}" *ngFor="let item of datadata">
      <td>{{ item.login }}</td>
      <td>{{ item.node_id }}</td>
      <td>{{ item.url }}</td>
      <td>
        <input id="box_ + {{ item.id }}" type="text" name="databox" #databoxInput><br>
        <button (click)="submit(item, databoxInput)">Retrieve data</button>
      </td>
    </tr>

You can access the values in the component as follows:

  submit(clickedItem, inputref) {
    console.log('clickedItem:', clickedItem, ' inputValue:', inputref.value)
  }

So you will get the clicked item object(contains entire data of the clicked row) and it's corresponding input value in the submit function.

score 0 · Answer 2 · edited Dec 31 '19 at 10:09

Use ngModel as a solution.

Add a global var as object in component and add use that var in input as ngModel with "id" as key of that var. Also pass id with button click so whenever button click, based on id we can easily got the input box value.

HTML: -

<tr id="{{ item.id }}" *ngFor="let item of datadata">
  <td>{{ item.login }}</td>
  <td>{{ item.node_id }}</td>
  <td>{{ item.url }}</td>
  <td>
    <input id="box_ + {{ item.id }}" type="text" name="databox" [(ngModel)]="testModel[item.id]"><br>
    <button (click)="submit(item.id)">Retrieve data</button>
  </td>
</tr>

COMPONENT:-

export class AppComponent  {
  name = 'Angular';

  testModel = {};
  private datadata: any;

  constructor(private dataService: DataService) {
    dataService.getData2().subscribe((data: any) => { 
      this.datadata = data;          
    });
  }    
  submit(id: any) {
    alert(this.testModel[id]);
  }    
}

score 0 · Answer 3 · answered Dec 31 '19 at 10:27

You can fetch them right away by modifying submit function to include a parameter: (submit(item)).

And on the function:

submit(item) {
    const input = <HTMLInputElement>(
      document.getElementById(`box_ + ${item.id}`)
    ); // circumvent The property 'value' does not exist on value of type 'HTMLElement' see https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement for more detail
    console.log(item.id, input.value);
}

https://stackblitz.com/edit/angular-8ifjwf?file=src/app/app.component.html

_{Note: You can see the id and the input data on the console.log. Feels free to reuse the value.}

How to Retrieve Specific Value from HTML using Angular

3 Answers3