Angular: CSS Class Binding
CSS Class binding permet de contrôler l'application d'une classe CSS sur une balise avec un attribut de la component
app.component.css
.class1{
color: green;
width:100%;
height:30px;
background:red;
}
.class2 {
color: red;
background-color: yellow;
}
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isClass1 = true;
appliquerClass2(x:Boolean) {
if (x) {
return true;
} else {
return false;
}
}
}
app.component.html
<!-- appliquer et retirer une class css -->
<div [class.class1]="isClass1">A</div>
<button (click)="isClass1=false">Désactiver Class1 css</button>
<!--appliquer deux classes Css :la class2 sera appliquer et class1 sera retiré-->
<div class="class1" [class.class2]="appliquerClass2(true)">B</div>
<!--appliquer deux classes Css :la class1 sera appliquer et class2 sera retiré-->
<div class="class1 class2" [class.class2]="appliquerClass2(false)">D</div>