menu FixWins.com Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular Android PFE
Spring MVC Spring Boot NodeJS+ExpressJS+Mysql ReactJS+NodeJS+Mysql Angular PFE

Angular: CSS Class Binding

folder Projet: angularApp
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>