Categorias
iiiiii
decordaro viewChield
Descripcion
Decorador
Notas
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="text-center card mb-2 bg-dark">
<div class="card-body text-white">
<p class="card-text">
Hola mundo
</p>
</div>
</div>
</div>
</div>
app_module
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'gifs-search-box',
// templateUrl: './search-box.component.html',
template:`
<h5>Buscar</h5>
<input type="text" class="form-control"
placeholder="Buscar gfigss.."
(keyup.enter)="searchTag()"
#txtTagInput
>
`,
styleUrls: ['./search-box.component.css']
})
export class SearchBoxComponent {
@ViewChild('txtTagInput') //De esta forma le decimos a una variable que va ser de tipo html y ara referencia al input de arriba con el #txtTagInput
mielemento!:ElementRef<HTMLInputElement>
searchTag(){
const valTag= this.mielemento.nativeElement.value;//Aqui extraemosel valor del input que esta dentro del componente html
console.log(valTag);
}
}
servicio
1. Se muestra como se puede usar en un tamplate de un componente un metodo. es decir
se va usar el decorador @ViewChild para convertir una variable a una referencia de ese input
y poder usarlo a nuestra conveniencia.
Por decirlo de otra forma es como hacer una referencia hacinedo el document.getElementById