[Angular 7][7] On Click Event

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Thursday, 14 Mar 2019

Hello world,

Kali ini pembahasan tentang salah satu event dalam kehidupan coding yaitu on Click. Saya akan coba contohkan dengan adanya sebuah tombol yang jika diklik akan melakukan sesuatu, memangil method dll. Langsung saja masuk ke contoh:

Perbaharui app.component.html

<button (click)="kliktombol()">

  Klik

</button>

Dari kode di atas ketika tombol diklik maka akan memanggil method kliktombol. Selanjutnya kita perbaharui app.component.ts

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


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'namaweb';

  kliktombol(){

    alert('ok')

  }

}

Hasilnya jika tombol diklik maka akan muncul popup alert berisi text “oke”. Selanjutnya perbaharui menjadi sebagai berikut:

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


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'namaweb';


  textinfo= "";

  kliktombol(event){

    this.textinfo = "Hello World"

  }

}

<button (click)="kliktombol()">

  Klik

</button>

{{textinfo}}

Pada contoh di atas kita membuat textinfo yang berisi string kosong. Kemudian pada event kliktombol() akan merubah isi textinfo menjadi “Hello World”. Sehingga jika tombol diklik maka akan muncul text “Hello World” di sebelah tombol. Kita juga dapat merubah textinfo langsung dari tombolnya dengan cara seperti berikut.

<button (click)="textinfo = 'Hello World'">

  Klik

</button>

{{textinfo}}


Selamat mencoba :)