1

I am trying to change the class on an element created with the font awesome library. Basically, I want on initial load the heart to not be filled in and have the class - 'far', then on click of button I want the heart to change to the class that fills the heart in - 'fas'. It does show the 'far' class on initial load, but does not change to the 'fas' class when the button is clicked.

HTML:

<button class="favorite-btn" ng-click="favMovie()">
  <i ng-class="{'fas' : toggle, 'far' : !toggle}" class="fa-heart"></i>
</button>

JS:

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
      console.log($scope.toggle);

      $scope.toggle = !$scope.toggle;

      console.log($scope.toggle);
    }
});

I have searched other stack questions/answers and nothing has helped.

This confirms in the console that it is in fact changing the toggle state (toggle === true || toggle === false), but not changing the class.

Demo:

// Code goes here

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
			console.log($scope.toggle);
			
			$scope.toggle = !$scope.toggle;
			
			console.log($scope.toggle);
		}
});
/* Styles go here */

button {width:150px; height:150px; font-size:5em;}
<!DOCTYPE html>
<html ng-app="movieApp">

  <head>
    <script data-require="[email protected]" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="lib/angular/angular.min.js"></script>-->
    <script src="script.js"></script>
  </head>

  <body ng-controller="DetailsController">
    <button class="favorite-btn" ng-click="favMovie()">
      <i ng-class="{'fas' : toggle, 'far' : !toggle}" class="fa-heart"></i>
    </button>
  </body>
  
  <!-- {{heartClass}}  {'fas' : toggle, 'far' : !toggle} -->

</html>

Any help is greatly appreciated!

1 Answer 1

4

Because you're using FA icon as JS, the icon will be rendered as SVG format. So SVG is not a normal element as you expected and effect in Angular functionalities. You should try another way to handle this. Please check my code snippet bellow:

// Code goes here

var app = angular.module("movieApp", []);
app.controller('DetailsController', function($scope, $log) {
  $scope.toggle = false;
  $scope.favMovie = function() {
			$scope.toggle = !$scope.toggle;
		}
});
/* Styles go here */

button {width:150px; height:150px; font-size:5em;}
<!DOCTYPE html>
<html ng-app="movieApp">

  <head>
    <script data-require="[email protected]" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="lib/angular/angular.min.js"></script>-->
    <script src="script.js"></script>
  </head>

  <body ng-controller="DetailsController">
    <button class="favorite-btn" ng-click="favMovie()">
      <span ng-if="!toggle"><i class="far fa-heart"></i></span>
      <span ng-if="toggle"><i class="fas fa-heart"></i></span>
    </button>
  </body>
  
  <!-- {{heartClass}}  {'fas' : toggle, 'far' : !toggle} -->

</html>

1
  • Just what I needed, this worked perfectly. Thank you! May 31, 2018 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.