html - Angular material progress spinner reactive - Stack Overflow

admin管理员组

文章数量:1128410

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>

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>

• html
• css
• angular
• angular-material
• spinner

Share Improve this question Follow edited Jan 9 at 15:17 Naren Murali 54.9k55 gold badges4040 silver badges7070 bronze badges asked Jan 8 at 13:18 LaCodeMLaCodeM 81911 gold badge99 silver badges2929 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

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

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

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

本文标签： htmlAngular material progress spinner reactiveStack Overflow