How get value element by id - Angular 4 - html

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) }