css Question posted in
Some basic documentation can be found here.

Css – Angular material progress spinner reactive

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>
Tags:

2

Answers


  1. 0

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

    export class MyComponent {
  diameter = window.clientWidth / 10;
}
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search