Angular 2 KeyDown Event Textbox
1. The KeyDown event is triggered when the user presses a Key.
2. The KeyUp event is triggered when the user releases a Key.
3. The KeyPress event is triggered when the user presses & releases a Key.
Stayed Informed – Angular 2 Input Events and Examples
The examples for KeyDown event,
Syntax:-
<input type="text" [(value)]="values" (keydown)="onKeydown($event)" />
<div class="ibox-title"> keydown Event - <input type="text" [(value)]="values" (keydown)="onKeydown($event)" /> <span><strong class="txt-color">Resut-</strong>{{values}}</span> </div>
Home Component –
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'], }) export class HomeComponent { userlist: Users[]; constructor() { this.userlist = [{ Id: '1001', name: 'Anil Singh', site: 'http://www.code-sample.com' }, { Id: '1002', name: 'Alok', site: 'http://www.code-view.com' }, { Id: '1003', name: 'Reena', site: 'http://www.code-sample.xyz' }, { Id: '1004', name: 'Dilip', site: 'http://www.codefari.com' }, ]; } values = ''; onKeydown(event: any) { this.values = event.target.value; console.log(this.values); }; } export class Users { Id: String; name: String; site: String; }
I hope you are
enjoying with this post! Please share with you friends. Thank you!!