Manejar un evento
Creo un botón en la vista y asocio un evento:
<button (click)="onSubmit()">Submit</button>
Método que maneja evento de pulsación de ratón en el botón:
onSubmit() {
console.log("onSubmit");
}
Visualización condicional
Ahora aplico la interpolación de cadenas para mostrar un mensaje cuando recibo el evento:
onSubmit() {
console.log("onSubmit");
this.msg = "Submit clicked!";
}
Usando la directiva condicional ngIf sólo se mostrará el mensaje cuando esté definido. En HTML+CSS es muy común que la etiqueta se cargue pero no este visible, pero sigue ocupando espacio.
<p *ngIf="msg">Mensaje: {{ msg }}</p>
Evento con parámetros (Template reference variables)
Ahora usaré variables referenciadas a elementos de la plantilla con "#".
<div class="field">
<label for="title">Title:</label>
<input name="title" id="title" #newtitle />
</div>
<div class="field">
<label for="link">Link:</label>
<input name="link" id="link" #newlink />
</div>
<button (click)="addData(newtitle.value, newlink.value)">Submit data</button>
addData(newtitle: string, newlink: string) {
console.log("newtitle:" + newtitle + ", newlink:" + newlink);
}
Campo edición de texto
Vista:
<label for="nombre">Nombre:</label>
<input type="text" (input)="onInputNombre($event)" />
<p>Nombre:{{ nombre }}</p>
nombre: string;
onInputNombre(event: Event) {
console.log(event);
this.nombre = (<HTMLInputElement>event.target).value;
}
Código fuente
Enlaces externos
- angular.io API > @angular/common ngIf.