Assigning a class based on a property value in angular2 typescript

Question

I would like to assign a classes on html based on a property in angular2. That is am trying top open a dropdownlist without use of jquery and bootstrap

So i have

<li
  class="dropdown mega-menu mega-menu-wide"

  //stuck at adding class of open if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

in my ts i have

export class ... {
  propertyval :null


   toggle(val){
    this.propertyval = null;
   }
  }

So now i would like to assign class of open to the list if the value of propertyval is admin else it should be null

How do i go about this

Mike Tung · Accepted Answer · 2018-01-15 18:26:15Z

2

You can use property binding to add the class dynamically.

<li
  class="dropdown mega-menu mega-menu-wide"
  [class.WhateverYouWant]="propertyval === 'admin'"
  //stuck at adding class of open if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

answered Jan 15, 2018 at 18:26

Mike Tung

4,8411 gold badge19 silver badges25 bronze badges

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

Comments

Julius Dzidzevičius · Accepted Answer · 2018-01-15 18:33:05Z

2

You can use NgClass directive:

<li [ngClass]="{'class-open': open}">  
  <a #admin class="dropdown-toggle" (click)="open = !open;" >Administrative</a>
</li>

class-open - is your class that affects dropdown list. open is your variable that you set initially to false or true in your component, so no need for toggle() method.

edited Jan 15, 2018 at 18:33

answered Jan 15, 2018 at 18:27

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

1 Comment

Geoff Over a year ago

the class should be assigned to li not a tag

Shakeer Hussain · Accepted Answer · 2018-01-15 18:34:17Z

1

Hi you can use [ngClass] for adding dynamic styles.

<a #admin class="dropdown-toggle" (click)="toggle(admin)"  [ngClass]="{'dynStyle': isAdmin }" >Administrative</a>

//style

.dynStyle{
  color:green;
}

//.ts

       toggle(val){
        if(val!='admin') 
        {
            this.propertyval = null;
          return isAdmin=false
           }
         else

    {
    return isAdmin=true;
    }
}

answered Jan 15, 2018 at 18:34

Shakeer Hussain

2,5947 gold badges33 silver badges57 bronze badges

Comments

Matt Sugden · Accepted Answer · 2018-01-15 18:28:40Z

0

Create a getter on your class, returning boolean for the state of your property.

get propertyHasValue(): boolean {
  return !isNullOrUndefined(this.propertyval);
}

Then add an ng-class directive to your element

<a [ng-class]="{ 'open': propertyHasValue }"/>

answered Jan 15, 2018 at 18:28

Matt Sugden

8846 silver badges12 bronze badges

Collectives™ on Stack Overflow

Assigning a class based on a property value in angular2 typescript

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related