Random Background Color Directive for Angularjs

RandomBackgroundcolor.js

// just add random-backgroundcolor to the element you want to give a random background color
app.directive("randomBackgroundcolor", function () {
    return {
        restrict: 'EA',
        replace: false,
        link: function (scope, element, attr) {

            //generate random color
            var color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16); 
            
            //Add random background class to selected element
            element.css('background-color', color);

        }
    }
});

Genial ...

Html File:

<a mat-list-item *ngFor="let Dist of DistributorList; let i = index">
<div " [ngStyle]="{'background': getRandomColor()}">
{{Dist.DistributorTitle | uppercase | slice:0:2}}

TS File:

getRandomColor() {
var color = Math.floor(0x1000000 * Math.random()).toString(16);
return '#' + ('000000' + color).slice(-6);
}
Screen Shot: