Angular 2 KeyPress Event Textbox

Angular 2 KeyPress Event Textbox – Examples

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 – Angular2 Input Events and Examples

The examples for KeyPress event,

Syntax:- 

<input type="text" [(value)]="values" (keypress)="onKeyPress($event)" />

HTML Component –

<div class="ibox-title">
    keypress Event - <input type="text" [(value)]="values" (keypress)="onKeyPress($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 = '';
    onKeyPress(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!!