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!!