CODEWITHSUNDEEP
angulartypescript
user10754742
user10754742

Reputation:

how to apply condition on class in a div element

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"

Upvotes: 0

Views: 1285

Answers (3)

Salim Ansari
Salim Ansari

Reputation: 41

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

Upvotes: 0

Mohamed Farouk
Mohamed Farouk

Reputation: 1107

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

Upvotes: 0

Fahad Hassan
Fahad Hassan

Reputation: 811

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

Upvotes: 2

Related Questions