Get fullcalender HTML-Elements with AngularJS and change them

Question

I'am using fullcalender and need to change some navigation buttons with AngularJS. I do not have much experience with AngularJS so the JS Code would be somthing like this:

var filter = $(".fc-filter-button");
filter.html("<i class='fas fa-filter'></i>");
filter.attr("id", "dropdownFilterButton");

But how can i archive this and some other usual JS/JQuery Tasks with AngularJS. I know i can use JQuery too but want to do it in the right Angular way.

I tried something like this:

element[0].getElementsByClassName('fc-filter-button').html("<i class='fas fa-filter'></i>")

or

var queryResult = element[0].querySelector('.fc-filter-button');
angular.element(queryResult).html("<i class='fas fa-filter'></i>")

How can i make these changes without touching the fullcalender code itself.

Answer 1

Take a look at the NgSanitize module "The ngSanitize module provides functionality to sanitize HTML".

Here's an basic example which should get you going in the right direction

angular.module('app', ["ngSanitize"])
.controller('myCtrl',function($scope){

$scope.content = "<p>The initial html</p>";

$scope.changeHtml = function(){
  $scope.content = "<h3>The changed html</h3>";
};
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular-sanitize.min.js"></script>

<div ng-app="app" ng-controller="myCtrl">

<button ng-click="changeHtml()">Change html</button>
<div ng-bind-html="content">
</div>

</div>