How get value element by id - Angular 4

Question

I'm working on REST API, I have one app beck-end in Java 1.6 and another front-end in Angular 4. I want to get the value by id of the HTML tag, I tried use DOM like this: <HTMLInputElement>document.getElementById(this.keyList[i].keyId)).value; but the problem is I can't use this sintax "this.keyList[i].keyId" because in class Key I have only one constructer, that fetch the attributes in JSON, so, when I go do key.keyId, said it does not exist. Does it exist another away to solve this problem, with propertys of ng? Thanks people.

HTML Code:

<!-- Breadcrumbs -->
<div class="row">
<div class="col-md-12">
    <ol class="breadcrumb">
        <li routerLinkActive="active"><a routerLink="/">Início</a></li>
        <li>Consulta</li>
    </ol>
</div>
</div>
<div class="row">
<div class="col-md-12">
    <fieldset>
        <legend>Consultar Dados Telemáticos</legend>
        <form>
            <!-- PROVIDERS -->
            <div class="row">
                <div class="col-md-4">
                    <label>Provedor</label> <span class="required">*</span> 
<br>
                    <select class="form-control 
(ngModel)]="selectedProvider"
                        (change)="getKey(selectedProvider)" name="provider">
                        <option *ngFor="let providers of providerHeaderList"
                            [ngValue]="providers">{{providers.description}}
</option>
                    </select>
                </div>
            </div>
            <!-- KEYS DYNAMIC -->
            <br />
            <div class="row">
                <div class="col-md-4" *ngFor="let keys of keyList">
                    <label>{{keys.description}}</label>
                    <span class="required">*</span>
                    <input [id]="keys.keyId" class="form-control" 
type="text" />
                </div>
            </div>
            <!-- DATE PICK -->
            <br />
            <div class="row" *ngIf="!keyList?.length==0">
                <div class="col-md-4">
                    <label>Data de Início da Pesquisa</label>
                    <input class="form-control" type="date" 
placeholder="dd/mm/aaaa" data-original-title title />
                </div>
            </div>
            <!-- BUTTON SEARCH -->
            <br />
            <br />
            <div class="row" *ngIf="!keyList?.length==0">
                <div class="col-md-4">
                    <button class="btn btn-primary btn-sm ng-binding" 
(click)="btnSearchClick()">Pesquisar</button>
                </div>
                <div class="col-md-12">
                    <span><small>* Campos de preenchimento obrigatório.
</small></span>
                </div>
            </div>
        </form>
    </fieldset>
</div>
</div>
<!-- RESULTS TABLE -->      
<app-provider-result></app-provider-result>

TypeScript Code:

// Angular
import { Component, OnInit, ElementRef } from '@angular/core';
// Serviços
import { ProviderService } from '../../services/provider.service';
import { KeyService } from '../../services/key.service';

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
// Observable class extensions
import 'rxjs/add/observable/of';
// Observable operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
// Modelos
import { Provider } from '../provider';
import { Key } from '../../key/key';

@Component( {
selector: 'app-provider-search',
templateUrl: './provider-search.component.html',
styleUrls: ['./provider-search.component.css']
} )
export class ProviderSearchComponent implements OnInit {

providerHeaderList: Provider[] = [];
keyList: Key[] = [];
selectedProvider = null;
keyValues: string[] = [];

constructor( private providerService: ProviderService, private keyService: KeyService, private myElement: ElementRef ) { }

ngOnInit() {
    this.getProviders();
}

getProviders() {
    this.providerService.getAllHeaders().subscribe( p => {
        this.providerHeaderList = p;
    } )
}

getKey(selectedProvider){
    this.keyService.getAllKeyByProviderId(selectedProvider.id, selectedProvider.description).subscribe( k => {
        this.keyList = k;
    });
}

btnSearchClick(){
}

}

Answer 1

You can make use of template refernce

Like

<input type = "text" value = "demo" #ref>
<button (click) = "submit(ref.value)">submit</button> 

Now in ts you can use like

ref.value // template val
submit(value){ console.log("Reference value" + value) }