Change mat-spinner Color In Angular Material Using Directives

Are you tired of the default and boring blue color of the mat-spinner component in Angular Material?

In this tutorial, we’ll show you how to easily change the mat-spinner color using custom directives.

This straightforward method allows you to quickly and easily customize the appearance of your progress spinners without having to delve into complex CSS styles. Do you want to learn how to implement this kind of Angular directive in your project? Then follow along in this tutorial.

Create Angular Directive to Set Mat-spinner Color

The component <mat-spinner> in Angular Material is by default having the color of the theme you choose for your Angular Material Application. In my case, this is the default color of the <mat-spinner> I just added to my Angular application:

The majority of solutions posted on the internet solve this problem by adding complex classes to the stylesheet, classes like this:

.container-div ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
        stroke: #000000;
    }

This then applies to all <mat-spinner>‘s in the application.

A much better solution to this is to use an Angular Directive. To generate the Angular directive you run the following command using the Angular CLI:

ng g d spinner-color

This command will create a directive called SpinnerColorDirective. Replace the content in spinner-color.directive.ts with the following code:

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: "[spinnerColor]"
})
export class SpinnerColorDirective implements AfterViewInit{

  @Input('spinnerColor') color: string = "#000000";

  constructor(
    private elem: ElementRef
  ){}

  ngAfterViewInit(){
    if(!!this.color){
      const element = this.elem.nativeElement;
      const circle = element.querySelector("circle");
      circle.style.stroke = this.color;
    }
  }

}

This directive accepts an input named spinnerColor that specifies the color to be used for the spinner. In the ngOnInit lifecycle hook, the directive sets the color of the stroke style property of the circle element inside mat-spinner.

Add Angular Directive to mat-spinner

To use this directive, you can apply it to a mat-spinner or mat-progress-spinner element, like this:

<mat-progress-spinner mode="indeterminate" spinnerColor="#09ff00"></mat-progress-spinner>

I also added the mode="indeterminate" property so the animations are visible.

The result should look like this:

Conclusion

That’s all there is to it! With just a few lines of code, you can easily change the color of mat-spinner in Angular Material to match the color scheme of your application.

I hope this article solved your problem or that you learned something new from it 🥰

Are you interested in learning more about Angular Material? Click here to browse our other Angular articles!