Card image cap
[Angular 7][5] Property Binding (Property vs Attribute)
Wednesday, 13 Mar 2019

Hello world,

Di sini akan sedikit membahas mengenai property dan attribute yang memiliki kesamaan dan perbedaan. Attribute didefinisikan oleh HTML sedangkan property didefinisikan oleh DOM (Document Object Model). Attribute menginisialisasi DOM Property dan tidak berubah. Sedangkan property dapat berubah. Dalam Angular dapat dituliskan seperti di bawah ini.

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


@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'namaweb';

  myid = 'idsaya';

}

Lalu dapat ditampilkan pada app.component.html. 


Jika dilihat dari hasil di atas, [id] = “myid” menghasilnya id=”idsaya” karena sebelumnya sudah diset pada app.component.tsSelain itu kita juga dapat menampilkannya menggunakan interpolation seperti contoh di bawah.


Lalu apa bedanya? Perbedaannya akan terlihat ketika kita ingin menampilkan property yang bernilai Boolean. Contoh :

<input type="text" value="Riza" id = "{{myid}}" disabled>

Pada contoh di atas akan menghasilkan form disabled. Jika kita set dari component seperti di bawah ini, dan menampilkannya menggunakan interpolation maka attribute disabled akan tetap berfungsi.

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


@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'namaweb';

  myid = 'idsaya';

  statusDisable = false;

}


Berbeda jika kita menampilkannya seperti berikut :


Selamat mencoba :)