How to use ngClass with css?

Question

I have a css code that looks like this:

:host >>> a.ng2-smart-sort-link.sort::after {
    content: '';
    right: 0.75rem;
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom-color: #1a2138;
    border-bottom: solid rgba(0, 0, 0, .3);
    border-left: solid transparent;
    border-right: solid transparent;
    border-width: 0.375rem;
    margin-bottom: 2px;
    top: 50%;
    -webkit-transform: translate(0, -50%) rotate(180deg);
    transform: translate(0, -50%) rotate(180deg);
  }

 a.sort.asc::after {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
 }

 <ng2-smart-table [ngClass]="{class: settings.columns.device.showSortIcon == true}"></ng2-smart-table>

How can I implement a class in css to use it with ngClass to display this css if a condition is true?

did you check any of the answers ? 🤔🤔

Muhammed Albarmavi
– Muhammed Albarmavi

2019-08-01 13:17:53 +00:00
Commented Aug 1, 2019 at 13:17 — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Aug 1, 2019 at 13:17

Florian · Accepted Answer · 2019-08-01 12:31:29Z

1

Use className to toggle your css class. If your css class name is class then :

<ng2-smart-table [className.class]="{!!settings.columns.device.showSortIcon }"</ng2-smart-table>

Or angular directive ngClass :

<ng2-smart-table [ngClass]="{'class': !!settings.columns.device.showSortIcon }"</ng2-smart-table>

I tend to prefer className when I only have one conditional class.

edited Aug 1, 2019 at 12:31

answered Aug 1, 2019 at 12:26

Florian

1,44811 silver badges16 bronze badges

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

Comments

Seba Cherian · Accepted Answer · 2019-08-01 12:18:37Z

0

Try this:

<ng2-smart-table [ngClass]="{'class':settings.columns.device.showSortIcon == true}"</ng2-smart-table>

answered Aug 1, 2019 at 12:18

Seba Cherian

1,7938 silver badges18 bronze badges

Comments

Muhammed Albarmavi · Accepted Answer · 2019-08-01 12:43:09Z

0

ngClass directive will add the class to the element it self so the class selector will be like this

:host >>> component-tag.calss .. {
  // something magical will happen 🧙‍♂️🌟
}

ngClass Class will add the class base of the condition is true

as an example consider this

template

<app-title [ngClass]="{'blue-text' : color === 'blue', 'green-text' : color == 'green'}">
</app-title>

style

:host >>> app-title.blue-text p {
  color: blue
}
:host >>> app-title.green-text p {
  color: green
}

demo 🌟🌟

answered Aug 1, 2019 at 12:43

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

2 Comments

mihaij Over a year ago

It dosen't work (this is the change I made[ngClass]="{'sort' : settings.columns.device.showSortIcon === true}"). I want to execute the css code if the condition is true (in typescript) to show a sort arrow on the header of a table. But if I change the condition in typescript to false it also show the icon.

Muhammed Albarmavi Over a year ago

have you try like this :host >>> ng2-smart-table.sort a.ng2-smart-sort-link.sort::after {} ? share with us the style file @mihai003

Collectives™ on Stack Overflow

How to use ngClass with css?

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related