[Angular][6] Class Binding

Wednesday, 13 Mar 2019 | By Riza

Image Load

Hello world,

Class binding biasanya digunakan untuk mengisi attribute class dengan variable tertentu untuk membuat proses yang lebih dinamis pada desain website. Seperti contohnya jika kita ingin ada proses mengganti class tertentu ketika ada tombol yang diklik.

Sebagai contoh ketika kita menampilkan sebuah tag html seperti berikut :

app.component.html

<h1 class="text-hijau">
  Hello world
</h1>


app.component.css

.text-hijau{
    color: green
}
.text-merah{
    color: red
}
.text-biru{
    color: blue
}


Hasil yang akan ditampilkan adalah text Hello world berwana hijau, sesuai dengan class yang digunakan yaitu .text-hijau.  Selanjutnya kita dapat set class dari component kemudian menampilkannya pada html.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'namaweb';
  
  classH1 = 'text-merah';
}


<h1 [class]="classH1">
  Hello world
</h1>


Kita juga dapat menggunakan Boolean seperti contoh berikut.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'namaweb';
  
  classError = true;
}


<h1 [class.text-merah]="classError">
  Hello world
</h1>


Contoh lain :

<h1 [class]="classError ? 'text-merah' : 'text-hijau'">
  Hello world
</h1>



Selamat mencoba :)