Hi all I have one button with font-awesome icon. I want to toggle that icon using jQuery or Javacript anything would be fine. I tried jQuery but previous icon is not getting removed from the button new icon is gettig toggled. Here is the code-
<button class="btn btn-primary" id="share_screen_button" ng-click="share_screen()"><i class="fas fa-desktop"></i></button>
$scope.share_screen=async () => {
if ( $scope.roomObject === undefined) return;
if (screenShareObj === undefined) {
screenShareObj = await $scope.roomObject.createScreenShareObject();
$("#share_screen_button").removeClass("fas fa-desktop");
$("#share_screen_button").addClass("far fa-window-close");
} else {
screenShareObj.leave();
screenShareObj = undefined;
$("#share_screen_button").removeClass("far fa-window-close");
$("#share_screen_button").addClass("fas fa-desktop");
}
}
How to resolve this? please help
When you are using Angularjs or any other framework please avoid direct manipulation as far as possible. let framework do it for you.
HTML
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-primary" id="share_screen_button" ng-click="toggle()">
<i ng-class="{'fas fa-desktop':which_class,'far fa-window-close':!which_class}"></i>
</button>
</div>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.which_class=true
$scope.toggle = function()
{
$scope.which_class = !$scope.which_class
console.log($scope.which_class)
}
});