How to use toggle css classes on an element onclick?

Question

Using angular typescript, not $scope. I seen a ton of examples for $scope or JQuery. I want to basically have a clickable ellipsis, that will remove the overflow and text-overflow properties of the class when clicked, so I can expand the full text of the div I am truncating. I believe it looks like I want to use ng-class, or make a function for an ng-click, but I can't find any examples that don't use $scope.class, and I it isn't like I can just use a this.class in typescript.

Here are the css classes I am trying to toggle:

.homeDescriptionDiv {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homeDescriptionDiv2 {
}

here is the html element, sans any Angular references:

<div class="col-md-12 homeDescriptionDiv" ng-click="changeClass()">
                                <h4>
                                    Description
                                </h4>
                                {{challenge.description}}
                            </div>

The typescript in my controller would look something like:

element.class = class1;
function changeClass(){
this.class=class2
}

Ulltimately, I would love to be able to toggle back and forth by clicking again, but removing the first class is the core requirement. Thanks!

please post a code example. it will help us find your problem. — toskv
– toskv, Commented Jan 11, 2016 at 23:21
also, I would advise you to read the how to ask a good question guide. :) stackoverflow.com/help/how-to-ask — toskv
– toskv, Commented Jan 11, 2016 at 23:21
thanks, sorry, I try, but I'm new and tired and way over-caffeinated today! I have posted the code I have. — ScottVMeyers
– ScottVMeyers, Commented Jan 11, 2016 at 23:30

basarat · Accepted Answer · 2016-01-11 23:43:44Z

4

In you controller have a property showClass and then bind it to the element like ng-class="{'some-class': vm.showClass}"

Now if showClass is true then element gets some-class otherwise some-class is removed. The toggle function on the controller is just this.showClass = !this.showClass

answered Jan 11, 2016 at 23:43

basarat

278k60 gold badges475 silver badges528 bronze badges

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

Collectives™ on Stack Overflow

How to use toggle css classes on an element onclick?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related