How to toggle icon button properly?

user_16632970 0
Viewed 65

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

bootstrap-4 twitter-bootstrap css jquery javascript
1 Answers

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)
  }
});
user_23964880
Related