How to toggle icon button properly?-CodePudding

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  id="share_screen_button" ng-click="share_screen()"><i ></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

CodePudding user response：

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  id="share_screen_button" ng-click="toggle()">
    <i ng-></i>
    </button>
</div>

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