When working with Angular typescript instead of $scope, I am having trouble finding examples that don't involve $scope or JQuery. My goal is to create a clickable ellipsis that, when clicked, removes the overflow and text-overflow properties of a specific class so that the full text can be expanded within a truncated div. I believe I may need to use ng-class or create a function for an ng-click event, but I have not been able to find any examples that do not utilize $scope.class. Unfortunately, it is not as simple as using this.class in typescript.
Below are the CSS classes I am attempting to toggle:
.homeDescriptionDiv {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.homeDescriptionDiv2 {
}
Here is the HTML element without any Angular references:
<div class="col-md-12 homeDescriptionDiv" ng-click="changeClass()">
<h4>
Description
</h4>
{{challenge.description}}
</div>
The typescript code in my controller would resemble something like this:
element.class = class1;
function changeClass(){
this.class=class2
}
Ultimately, I would like to implement a toggling functionality by clicking again, but initially removing the first class is the main requirement. Any insights would be greatly appreciated! Thank you!