How to change CSS dynamically in Service Portal from server script?

[krempec_3]

I am making a widget that reports the number of records in the outbox. I would like to change the color of the number to red if the outbox number gets over a certain value but I'm not sure how to go about it. Any information would be helpful.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link href='https://www.osu.edu/assets/fonts/webfonts.css' rel='stylesheet' type='text/css'></link>
<div style="font-family:'proximanova'">

<div class="critical-incidents col-md-2" ng-app="myApp" ng-controller="myCtrl">

<div class="panel panel-default" style = "position: relative; top: 17em;">

<div class="panel-heading" style = "font-size: 30px;text-align:center;">Number in Outbox <i class="fa fa-envelope" aria-hidden="true"></i></div>

<div class="panel-body text-center">
<p id="count" class="out-number" > {{c.data.outBoxCount}}</p>

</div>

</div>

</div>

</div>

Client Script:

function($scope, $timeout) {

/* widget controller */

var c = this;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$timeout(function() {

var countoutbox = c.data.outBoxCount;
if(Integer.parseInt(count) > 500){
document.getElementById("count").style.color = "red";
}

}, 500);

});

}

Server Script:

(function() {

data.incidentCount = '';

var gr = new GlideRecord('sys_email');

gr.addQuery('mailbox.name', 'Outbox');

gr.query();

data.outBoxCount = gr.getRowCount().toString();

})();

[Dan Conroy · Accepted solution]

Look at the ng-class directive.

For example, if you have a variable on the server data.count, then you can do this:

<div ng-class="{ 'red-class' : c.data.count > 50}">

And this will add the "red-class" class to the div.

You don't need to use document.getElementById in an AngularJS app. Take a look at the available AngularJS directives here: https://docs.angularjs.org/api/ng/directive/