Dynamic CSS Classes in Angular2+

Question

HTML:

<div *ngFor="let record of lift" class="list-lifts" [class.showLifts]="isBtnActive">

Component:

isBtnActive: boolean = false;

toggleClass() {
    this.isBtnActive = !this.isBtnActive;
  }

CSS:

.list-lifts {

  &:not(:first-of-type) {
    margin-top: -11px !important;
    display: none;
  }
}

.showLifts {
  display: block !important;
}

// I need something like this to be built in the view:
.ValueshowLifts {}

The toggleClass() function toggles the CSS class .showLifts on the click of a button. This works great.

The issue is, I need the class .showLifts to have a dynamic name and I'm not sure what the syntax is to produce it. For logical reasons, here's an example:

[class.{{ record.name }}showLifts]="isBtnActive"

But of course this isn't valid syntax.

Hint from user663031 is reasonable, but won't compile at '['. The expression has to be moved to a function, then it works — quetzalcoatl, Apr 09 '19 at 13:15

score 10 · Accepted Answer · edited May 22 '18 at 10:05

10

As others have mentioned you can use [ngClass]. An answer was posted here:

Dynamic classname inside ngClass in angular 2

But I wanted to mention that if you're using CSS to only hide or show elements, then instead you can use *ngIf or [hidden], depending if you want the element in the DOM or not.

edited May 22 '18 at 10:05

Sunil Garg

14,608
25
132
189

answered Jun 17 '17 at 06:19

jason_hamp

136
4

score 7 · Answer 2 · answered Jun 17 '17 at 06:12

You can leverage ngClass directive here

[ngClass]="showLiftsClass"

Inside your code you can dynamically add css classes to it as follows,

showLiftsClass = {
      'record1showLifts' : true,
      'record2showLifts' : false,
      'record3showLifts' : false,
      'record4showLifts' : false
      ...
}

You can have single or multiple classes as a true. Value true will add the class to the DOM element.

score 3 · Answer 3 · edited May 09 '18 at 16:10

3

<div class="form-group label-floating" 
    [ngClass]="{'is-empty': true, 'second-class' : true}"></div>

edited May 09 '18 at 16:10

isherwood

58,414
16
114
157

answered Oct 27 '17 at 05:56

ganesh kalje

3,014
2
16
12

Ketan Akbari · Answer 4 · 2017-06-17T06:47:20.603

-1

Try this:

<div *ngFor="let record of lift; ; let i=index" class="list-lifts" 
[ngClass]="{'showLifts': isBtnActive}">

Or you can Use: *ngIf

*ngIf="expression" (e.g. *ngIf="i!=0" or *ngIf="i==0")

edited Jun 17 '17 at 06:47

answered Jun 17 '17 at 06:13

Ketan Akbari

10,837
5
31
51

The class toggling works, but I'm still stuck at square one with the issue. I need the class .showLifts to have an appended string such as {{ record.name }}. – Joe Berthelot Jun 17 '17 at 06:17
like this? {{record.name}} – Ketan Akbari Jun 17 '17 at 06:19
or you can not want toggling for string then, {{record.name}} or {{record.name}} – Ketan Akbari Jun 17 '17 at 06:21
That won't work, let me try to explain it better: These divs are being built dynamically using *ngFor, and they are split into 4 categories. I'm hiding everything except the first-child of each category using display:none. onClick, a CSS class with display: block gets added to show the children. I need the CSS class to be dynamic because without it, every category becomes visible by clicking any button. – Joe Berthelot Jun 17 '17 at 06:30
you can use index of record, i have updated anwer. by perticular index you can hide or show element. like [ngClass]="{'list-lifts': i==0}" – Ketan Akbari Jun 17 '17 at 06:39

Dynamic CSS Classes in Angular2+

4 Answers4