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
– quetzalcoatl, Commented Apr 9, 2019 at 13:15

Code Guru · Accepted Answer · 2018-05-22 10:05:49Z

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, 2018 at 10:05

Code Guru

15.8k31 gold badges147 silver badges214 bronze badges

answered Jun 17, 2017 at 6:19

jason_hamp

1364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raj · Accepted Answer · 2017-06-17 06:12:42Z

7

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.

answered Jun 17, 2017 at 6:12

Raj

5051 gold badge6 silver badges14 bronze badges

Comments

isherwood · Accepted Answer · 2018-05-09 16:10:32Z

3

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

edited May 9, 2018 at 16:10

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Oct 27, 2017 at 5:56

ganesh kalje

3,1922 gold badges19 silver badges12 bronze badges

Comments

Ketan Akbari · Accepted Answer · 2017-06-17 06:47:20Z

-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, 2017 at 6:47

answered Jun 17, 2017 at 6:13

Ketan Akbari

11.3k5 gold badges36 silver badges52 bronze badges

5 Comments

Joe Berthelot Over a year ago

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 }}.

Ketan Akbari Over a year ago

like this? {{record.name}}

Ketan Akbari Over a year ago

or you can not want toggling for string then, {{record.name}} or {{record.name}}

Joe Berthelot Over a year ago

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.

Ketan Akbari Over a year ago

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}"

Collectives™ on Stack Overflow

Dynamic CSS Classes in Angular2+

4 Answers 4

Comments

Comments

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Linked

Related