[Angular 7][9] Template Reference Variables

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
Monday, 25 Mar 2019

Hello world,

Kali ini pembahasannya adalah mengenai Template reference variable. Apakah itu? Dari namanya mungkin bisa dimaknai secara singkat bahwa Template reference variable adalah sebuah variable yang akan menjadi referensi. Template reference variable sering digunakan sebagai referensi element DOM dalam template atau ke angular. Maksudnya referensi element DOM di sini adalah kode/simbol yang bisa digunakan untuk memanggil parameter/value dalam sebuah tag yang diberi kode tersebut. Muter-muter ya penjelasannya hehe, mungkin langsung saja ke contoh. Simbol yang dipakai adalah tanda pagar (#) atau prefix ref-.

Contoh :

Kita buat sebuah tag input dan sebuah button dimana kita dapat mengambil value dari input ketika button diklik.

app.component.html

<input #phone placeholder="phone number">

<button (click)="callPhone(phone.value)">Call</button>

atau 

<input ref-phone placeholder="phone number">

<button (click)="callPhone(phone.value)">Call</button>


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';


  callPhone(value){

    alert(value)

  }

}

Dari contoh di atas maka ketika tombol diklik akan mengambil value dari input, kemudian akan dijalankan method callPhone dan di dalam method tersebut dijalankan alert berisi value.


Selamat mencoba :)