Angular HTML class.otherclass explanation

Question

I have seen this HTML line in an Angular project:

<div id="player" class="player" [class.voted]="booleanvar">

The CSS contains a defintion of .player.voted

I'm not really sure what this part means: [class.voted]="booleanvar"

It adds or removes the "voted" class based on the value of `booleanvar`. It's a bit easier (?) to read than `[ngClass]="{player: true, voted: booleanvar}"`. — Heretic Monkey, Apr 29 '19 at 22:01
Possible duplicate of [Difference between \[ngClass\] vs \[class\] binding](https://stackoverflow.com/questions/45321526/difference-between-ngclass-vs-class-binding) — Heretic Monkey, Apr 29 '19 at 22:04
@HereticMonkey please add your comment as an answer and I'll accept it — CodeMonkey, Apr 29 '19 at 22:05
It is angular class binding. You can find the documentation here [link](https://angular.io/guide/template-syntax#class-binding) — Hari Pillai, Apr 30 '19 at 06:14

devDan · Answer 1 · 2019-04-29T22:11:15.047

1

This is one way of dynamically applying a class to an HTML element in Angular.

If booleanvar equates to true then the css class voted will be applied, so long as its defined correctly in CSS file. If it equates to false, then the class will not be applied.

<div id="player" class="player" [class.voted]="booleanvar">

edited Apr 29 '19 at 22:11

answered Apr 29 '19 at 22:05

devDan

5,969
3
21
40

score 0 · Accepted Answer · answered Apr 30 '19 at 06:07

I hope you help it

[class.voted]="booleanvar" this means the element add a class "voted" when "booleanvar" poperty or a variable value is true.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template:`
    <div id="player" class="player" [class.voted]="booleanvar">
  `
})
export class AppComponent {
  booleanvar:boolean = true;
}

when booleanvar = false then the render element like '<div id="player" class="player">'

Otherwise it's render <div id="player" class="player voted">

Angular HTML class.otherclass explanation

2 Answers2