lifelong learner — urip iku urup, currently working on accenture.

angular – template

0
Degananda.com -

1. introduction

Template secara bahasa indonesia berarti cetakan yang digunakan untuk mencetak sesuatu. Contohnya cetakan kue yang berbentuk bintang akan jika diberi adonan akan menghasilkan adonan yang berbentuk bintang. Sehingga sebuah template memiliki :

1.1 Input
input disini berarti jenis bahan yang akan dimasukan kedalam cetakan. Misalnya adonan tepung untuk kasus cetakan roti. Sedangkan pada angular, input dari sebuah template dari berupa property dari komponen ataupun fungsi yang memberikan nilai return

1.2. Output
output adalah hasil dari cetakan/template yang memproses inputan sesuai dengan pattern dari cetakan tesebut. Misalnya cetakan roti akan menghasilkan bentuk roti. Pada angular output dari template berupa string yang dapat masuk ke nilai attribute, nilai property maupun ke html container (baca di bab 3 mengenai template experssion untuk lebih detail).

Pada angular dikenal dengan istilah template syntax. Yakni suatu cetakan yang berguna untuk menampilkan data dari komponen atau dari user input pada DOM dengan bantuan data binding. Komponen pada angular berperan sebagai controller sekaligus sebagai viewmodel dan template(file html) berperan sebagai view. Pada ulasan ini akan dibahas mengenai bagaimana menggunakan template syntax pada view.

2. interpolasi

{{ nama_properti/fungsi_yang_mereturn_value }}

interpolasi atau interpolation dilambangkan dengan double curly bracket (“{{}}”). Isi dari double curly bracket tersebut dapat berupa:

  1. property dari suatu komponen / variabel pada suatu komponen.
  2. fungsi yang memberikan return
  3. property shared service via dependency injection
  4. fungsi dari shared service yang memberikan return
export class AppComponent {
  nama  = 'degananda ferdian';
  umur : number = 23;
}

maka kita dapat menampilkan properti tersebut pada dom

<h1>
  {{nama}} <br />
  {{umur}} <br />
</h1>

Syntax ini digunakan untuk data dari komponen ke DOM. Interpolasi tidak hanya dapat digunakan pada syntaxt seperti “div” atau “span” , atau syntax container lainnya. Melainkan syntax interpolasi ini dapat juga digunakan untuk mengisi suatu attribute pada syntax html tertentu. Misalnya pada attribute “src” pada syntax “<img>”. Kita dapat menggunakan interpolasi pada src.

[img src=”{{data}}”]. Hal ini juga berlaku pada attribute-attribute lainnya.

contohnya adalah misalkan kita memiliki properti seperti dibawah ini

export class AppComponent {
  nama : String  = 'degananda ferdian';
  umur : number = 23;
  avatar : String = 'http://1.gravatar.com/avatar/4bd60e4415049fe15f0892f277f52d32?s=100&d=identicon&r=g';
}

kita dapat melakukan interpolasi terhadap properti avatar dengan menggunakan double curly brakcet

<h1>
  <div style="width: 400px">
    <div style="float:left;">
      <img src="{{avatar}}">
    </div>
    <div style="float:right;">
      {{nama}} <br />
      {{umur}} <br />
    </div>
    <div style="clear:both;"></div>
  </div>
</h1>

yang akan menghasilkan

 

2.1 Operasi

Dalam double curly bracket tersebut kita juga dapat melakukan operasi matematika, seperti :

  1. Pertambahan
  2. Pengurangan
  3. Perkalian
  4. Pembagian

Operasi tersebut hanya dapat dilakukan dengan data bertipe number / integer (karena angular menggunakan typescript maka istilahnya adalah number). Operasi (“+”) antara string dan number akan menggabungkan dua data

<h1>
  <div style="width: 400px">
    {{nama + umur}}
  </div>
</h1>

hasilnya pada browser adalah

namun jika tiga operasi lainnya dilakukan antara string dan number maka yang terjadia dalah

<h1>
  <div style="width: 400px">
    {{nama - umur}}
  </div>
</h1>

maka hasil pada browser akan menghasilkan “Nan”. Nan adalah sebuah object yang merepresentasikan hasil perhitungan yang bukan angka.

3. Template expression

template experession secara gamblangnya disebut sebagai nilai dari suatu property.

<img [src]>=””> dan <img src=””> memiliki fungsi yang sama untuk menampilkan sebuah gambar dari source tertentu. Akan tetapi memiliki perilaku yang berbeda. Pada syntax tersebut src bersifat sebagai property dan bersifat sebagai attribute. Letak perbedaannya hanyalah ketika memberikan nilai pada property/attribute.

  1. “src” sebagai property
  2. “src” sebagai attribute

src sebagai properti , maka penulisan template expressionnya seperti berikut

      <!-- penulisan expression pada properti -->
      <img [src]="avatar">

src sebagai attribute, maka penulisan template expressionnya seperti berikut

      <!-- penulisan expression pada attribute -->
      <img src="{{avatar}}">

template expression digunakan untuk memberikan value / nilai pada sebuah properti. Secara umum, pada template expression ini berfungsi layaknya seperti double curly bracket. Ia dapat melakukan operasi(artimatika) dan mereturn properti dari komponen. Selain dua itu nilai yang dapat kita masukan dalam expression antara lain :

  1. assignment ( +=, = , -=, … dan lain – lain)
  2. new
  3. melakukan chain dengan memisah melalui “;” ( titik koma )
  4. increment
  5. logic ( contoh : && , || )

itulah kegunaan dari template expression yang sangat berguna dalam melakukan coding project angular.