how to apply condition on class in a div element

Question

How to apply CSS class condition to the below div element

i tried the below code but it is not working

  <div Class="{toolsMenuWidthSet==true?'dropdown-menu dropdown-menu-right dropdown-custom-width-links':'dropdown-menu dropdown-menu-right dropdown-custom-width-links-2'}"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

I want if toolsMenuWidthSet is true then apply the "dropdown-menu dropdown-menu-right dropdown-custom-width-links" else apply "dropdown-menu dropdown-menu-right dropdown-custom-width-links-2"

See this one [Link](https://stackoverflow.com/a/48223518/11719787) — Sameer, Jan 29 '20 at 03:48

Fahad Hassan · Accepted Answer · 2020-01-29T03:52:09.100

2

Your syntax is wrong. There is a directive called ngClass in angular which you can use like this

 <div [ngClass]="toolsMenuWidthSet == true ? 'dropdown-menu dropdown-menu-right dropdown-custom-width-links' : 'dropdown-menu dropdown-menu-right dropdown-custom-width-links-2'"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

but if you don't want to use ngClass directive so you can also go with angular binding like this

<div class="{{toolsMenuWidthSet == true ? 'dropdown-menu dropdown-menu-right dropdown-custom-width-links' : 'dropdown-menu dropdown-menu-right dropdown-custom-width-links-2'}}"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

edited Jan 29 '20 at 03:52

answered Jan 29 '20 at 03:47

Fahad Hassan

781
10
20

if we are using ngclass do we need to import something? As i tried this but it is not working for me – Jan 29 '20 at 03:49
No, There was a typo in my answer. I updated my answer please see updated answer – Fahad Hassan Jan 29 '20 at 03:52
This is working but my css style is not getting applied as expected before all items were coming inside the div horizontal now it is coming vertical – Jan 29 '20 at 04:10
if i put like class= 'dropdown-menu dropdown-menu-right dropdown-custom-width-links' it comes horizontal – Jan 29 '20 at 04:11
This is because the last CSS is not getting applied – Jan 29 '20 at 04:33

Mohamed Farouk · Answer 2 · 2020-01-29T04:33:06.370

0

Use [ngClass]

 <div [ngClass]="{'dropdown-menu':toolsMenuWidthSet, 'dropdown-menu-right dropdown-custom-width-links':toolsMenuWidthSet, 'dropdown-menu': !toolsMenuWidthSet, 'dropdown-menu-right dropdown-custom-width-links-2':!toolsMenuWidthSet}"  aria-labelledby="dropdownMenuButton" id="appsDropdownPopup">

The CSS classes are updated as follows, depending on the type of the expression evaluation:

string - the CSS classes listed in the string (space delimited) are added,

Array - the CSS classes declared as Array elements are added,

Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

Doco:https://angular.io/api/common/NgClass

edited Jan 29 '20 at 04:33

answered Jan 29 '20 at 03:48

Mohamed Farouk

1,089
5
10

this does not work. Do i need to import something because with this none of the CSS are getting applied for this div element – Jan 29 '20 at 04:13
Sorry, you need to separate each class.. will update answer.. no you do not need to import anything – Mohamed Farouk Jan 29 '20 at 04:32
Try to render toolsMenuWidthSet {{toolsMenuWidthSet}} to see its value as well. – Mohamed Farouk Jan 29 '20 at 04:34
{{toolsMenuWidthSet}} is fine – Jan 29 '20 at 04:37
mmm. can you put your code on stackblitz to check it with you? not sure why it is not working then – Mohamed Farouk Jan 29 '20 at 04:46

score 0 · Answer 3 · answered Jan 29 '20 at 07:50

Use this one, it's working fine.

<div class="dropdown-menu dropdown-menu-right" 
    [ngClass]="toolsMenuWidthSet==true ?
    ' dropdown-custom-width-links' : 
    ' dropdown-custom-width-links-2'"
    aria-labelledby="dropdownMenuButton" 
    id="appsDropdownPopup">

how to apply condition on class in a div element

3 Answers3