How to get value element by id - Angular 4

I am working on REST API, I have one beck-end application in Java 1.6 and another interface in Angular 4. I want to get the value by id of HTML tag, I tried using DOM like this: <HTMLInputElement>document.getElementById(this.keyList[i].keyId)).value;

but the problem is that I am not can use this sintax "this.keyList [i] .keyId" because in the Key class I only have one constructor that retrieves the attributes in JSON when I go to do key.keyId said it doesn't exist. Is it left for others to solve this problem, with ng property? 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(){
}

}