Card image cap
[Angular 7][8] On Key Event
Friday, 22 Mar 2019

Hello world,

Melanjutkan dari pembahasan sebelumnya mengenai Event, kali ini jenis event yang saya bahas adalah On Key. Jika biasanya kita menemukan event onkeypress atau onkeyup di javascript atau framework seperti Jquery dan lain-lain, di angular pun masih sama fungsinya. Perbedaanya mungkin hanya cara penulisannya. Oke langsung ke pembahasan. Di bawah ini saya beri contoh sebuah form dengan event keyup dimana event akan berjalan setiap kali kita mengetik sesuatu di dalam form input. Kemudian keyup akan menjalankan method bernama onkey (ini hanya penamaan, bisa diberi nama sesuka hati).

<input (keyup)="onKey($event)">

<p>{{values}}</p>

Kemudian pada app.component.ts kita buat methodnya. Jangan lupa juga kita buat property bernama value yang mana akan ditampilkan dengan interpolation di bawah form (lihat kode di atas). 

import { Component } from '@angular/core';


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'namaweb';


  values = '';


  onKey(event: any) { // without type info

    this.values = event.target.value;

  }

}

Hasilnya jika form input diisi maka text yang menjadi value akan muncul juga di bawah form input. Bisa juga dengan cara berikut.

onKey(event: any) {

    this.values = (<HTMLInputElement>event.target).value;        

}


Selamat Mencoba :)