Angular material progress spinner reactive

Question

in Angular material progress spinner component we can actually set size by setting diameter. I want to know if there is an option to make this diameter responsive so it based on window size.

<mat-progress-spinner [diameter]=24> </mat-progress-spinner>

what I would like to have is:

<mat-progress-spinner [diameter]="some-relative-size"> </mat-progress-spinner>

Answer 1

You can create a directive, that adapts to the resize of the screen, but honestly, this should be done simply using media queries:

mat-spinner {
  width: 300px !important;
  height: 300px !important;
}

@media screen and (max-width: 768px) {
  mat-spinner {
    width: 150px !important;
    height: 150px !important;
  }
}

@media screen and (max-width: 480px) {
  mat-spinner {
    width: 50px !important;
    height: 50px !important;
  }
}

Stackblitz Demo

---

Instead of complicated angular code.

@Directive({
  selector: '[dynamicWidth]',
})
export class DynamicWidthDirective {
  cdr = inject(ChangeDetectorRef);
  spinner = inject(MatProgressSpinner);
  percentage = model(1, {
    alias: 'dynamicWidth',
  });

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.spinner!.diameter = event.target.innerWidth * this.percentage();
    this.cdr.detectChanges();
  }

  ngAfterViewInit() {
    this.spinner!.diameter = window.innerWidth * this.percentage();
    this.cdr.detectChanges();
  }
}

Stackblitz Demo

Answer 2

You can just declare a variable in your TS file based on the window ?

export class MyComponent {
  diameter = window.clientWidth / 10;
}