Card image cap
[Angular 7][6] Class Binding
Wednesday, 13 Mar 2019

Hello world,

Kali ini pembahasannya adalah tentang Class binding. Bukan Class sebagai bagian dari Component tetapi class dalam HTML. Kita dapat mengatur class dalam HTML menggunakan property dari component. 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>

Dari contoh di atas maka class text-merah akan bekerja jika classError memiliki value true. Cara lain untuk menampilkannya adalah sebagai berikut.

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

  Hello world

</h1>


Selamat mencoba :)