CODEWITHSUNDEEP
cssangularjstypescript
ScottVMeyers
ScottVMeyers

Reputation: 315

How to use toggle css classes on an element onclick?

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!

Upvotes: 3

Views: 469

Answers (1)

basarat
basarat

Reputation: 276299

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

Upvotes: 4

Related Questions