Event Binding Pada Angular

Setelah mempelajar data binding, berikutnya kita akan membahas event binding.

Event binding menggunakan format seperti berikut.

(nama_event) = "method_yang_dipanggil()"

Melanjutkan dari contoh sebelumnya, kita akan tambahkan event pada button.

Skenarionya adalah ketika button di click, isi text “No server created…” akan diubah menjadi “Server created…”.

Buka file server.component.ts, lalu tambahkan code berikut (lihat bagian commentar event binding).

Tips: umumnya konvensi penamaan method untuk event binding digunakan awalan on. Tujuannya agar lebih mudah dipahami.

//file: server.component.ts

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

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html',
    styleUrls: ['./server.component.css']
})
export class ServerComponent{
    serverId: number = 1;
    serverStat: string = 'online';
    allowNewServer: boolean = false;
    //event binding
    serverCreationStat: string = 'No server created...';

    constructor(){
        setTimeout(()=>{this.allowNewServer = true;}, 2000);
    }

    getServerStat(){
        return this.serverStat;
    }
    //event binding
    onServerCreate(){
        this.serverCreationStat = 'Server created...';
    }
 }

Kemudian buka file server.component.html. Tambahkan event binding saat button di click.

Perhatikan, event ditulis tanpa kata on.

/* file: server.component.html */

<p>Server: {{serverId}} status: {{getServerStat()}}</p>
<p>{{serverCreationStat}}</p>
<hr>
<button class="btn btn-primary" [disabled]="!allowNewServer" (click)="onServerCreate()">Add Server</button>

Tips, jika code yang dijalankan pendek, Anda bisa menuliskan langsung pada file template, namun lebih disarankan dibuat dalam file typescript. Karena file template tujuannya bukan berisi logika program.

<button class="btn btn-primary" [disabled]="!allowNewServer" (click)="serverCreationStat='Server created..';">Add Server</button>

Sesuai ekspektasi, saat di click, text akan diubah.

Pasing Data Pada Event Binding

Kita bisa pass data dengan menggunakan reserved variable $event.

Agar lebih jelas, kita buat contoh dengan skenario, user bisa menginput nama server untuk ditambahkan.

Buka file server.component.html, lalu tambahkan element input type text.

/* file: server.component.html */

<p>Server: {{serverId}} status: {{getServerStat()}}</p>
<p>{{serverCreationStat}}</p>
<hr>
<label>Server Name</label>
<input type="text" class="form-control" (input)="onUpdateNameServer($event)">
<button class="btn btn-primary" [disabled]="!allowNewServer" (click)="onServerCreate()">Add Server</button>

Kemudian pada file server.component.ts, kita tambahkan kode untuk menangkap data yang diinput oleh user.

//file: server.component.ts

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

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html',
    styleUrls: ['./server.component.css']
})
export class ServerComponent{
    serverId: number = 1;
    serverStat: string = 'online';
    allowNewServer: boolean = false;
    serverCreationStat: string = 'No server created...';
    //event binding with data
    serverName: string = 'anonymous ';

    constructor(){
        setTimeout(()=>{this.allowNewServer = true;}, 2000);
    }

    getServerStat(){
        return this.serverStat;
    }

    onServerCreate(){
        this.serverCreationStat = this.serverName + ' Server created...';
    }

    //event binding with data
    onUpdateNameServer(event : Event){
        this.serverName = (<HTMLInputElement>event.target).value
    }
 }