CSS դասերի զանգվածային կապում Angular-ում

Օգտագործելով ngClass դիրեկտիվը, հնարավոր է միանգամից միացնել և անջատել CSS դասերի հավաքածու տեգում: Դիրեկտիվը որպես արժեք ընդունում է օբյեկտ, որի բանալիները կլինեն դասերը, իսկ արժեքները՝ բուլյան արժեքներ: Դասը կլինի միացված, եթե դրա համար սահմանված է true արժեք, և անջատված, եթե false:

Եկեք գործնականում նայենք: Ենթադրենք, մենք ունենք հետևյալ դասերը:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

Եկեք օրինակներով տեսնենք, թե ինչպես միացնել և անջատել այդ դասերը բլոկի համար:

Օրինակ

Միացնենք մեկ դաս և անջատենք մյուսը:

app/app.component.html<div [ngClass]="{blue: true, bold: false}">
  text
</div>

Օրինակ

Ենթադրենք, դասերի վիճակները պահվում են կլասի հատկություններում.

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Կապենք դասի տեսանելիությունը կախված մեր հատկությունների արժեքներից.

app/app.component.html<div [ngClass]="{blue: isBlue, bold: isBold}">
  text
</div>

Օրինակ

Հատկության մեջ կարող է լինել ամբողջական օբյեկտ դասերով և վիճակներով.

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

Կապենք այս օբյեկտը մեր բլոկին.

app/app.component.html<div [ngClass]="styles">
  text
</div>

Օրինակ

Հնարավոր է մեր օբյեկտի արժեքները ստանալ կլասի այլ հատկություններից.

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = false;
  public isBold: boolean = true;

  public styles = {
    blue: this.isBlue,
    bold: this.isBold,
  }
}

Կապենք այս օբյեկտը մեր բլոկին.

app/app.component.html<div [ngClass]="styles">
  text
</div>

Գործնական առաջադրանքներ