Angular 2 Input TextBox Change Events Examples

Angular 2 Input Events like KeyUp, KeyDown, KeyPress and so on are given below with examples. Click and explore in detail events types.

Angular 2 Input Events Types,

1. Keyup

2. Keypress

3. Change

4. Keydown

5. And so on

The KeyUp event is triggered when the user releases a Key.

The KeyDown event is triggered when the user presses a Key.
The KeyPress event is triggered when the user presses & releases a Key.

Stayed Informed – Angular 2 documentations and examples

The all above events example as given below,

Syntax –

keyup Event - <input type="text" [(value)]="values" (keyup)="onKeyUp($event)" /> 

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

change Event - <input type="text" [(value)]="values" (change)="onChange($event)" />

keydown Event - <input type="text" [(value)]="values" (keydown)="onKeydown($event)" />

home.component.html :-

<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
    <h5>Angular 2 for loop typescript example - *ngFor</h5>
</div>
<div class="ibox-title">
    <input type="text" [(value)]="values" (keyup)="onKeyUp($event)" /> <strong>Resut- {{values}}</strong>
</div>
<div class="ibox-content">
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name </th>
                    <th>SiteUrl </th>
                    <th>Actions </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let user of userlist; let i = index" class="tbl-row-border">
                    <td>{{user.Id}}</td>
                    <td>{{user.name}}</td>
                    <td><a href="{{user.site}}" target="_blank">{{user.site}}</a></td>
                    <td><a (click)="addUser(user)">A</a>|<a (click)="updateUser(user)">E</a>|<a (click)="deleteUser(user)">D</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
</div>
</div>

home.component.ts :-

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

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    //styleUrls: ['./home.component.css'],
    styles: ['.tbl-row-border { border: 1px solid red;}']
})

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 = '';
    onKeyUp(event: any) {
        this.values = event.target.value;
    };

    onKeyPress(event: any) {
       this.values = event.target.value;
    };

    onChange(event: any) {
       this.values = event.target.value;
    };

    onKeydown(event: any) {
      this.values = event.target.value;
    };
}

export class Users {
    Id: String;
    name: String;
    site: String;
}

app.module.ts :-

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/shared/header/header.component';
import { MenuComponent } from './components/menu/menu.component';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        AppComponent,
        HomeComponent,
        HeaderComponent,
        MenuComponent        
    ],
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModule {
}

Ouptput-

I hope you are enjoying with this post! Please share with you friends. Thank you!!

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2