Angular Material progress spinner size in flex layout

Question

I have a fxFlex="row" inside of which there's a button and a mat-spinner. I want the mat-spinner's size to be the same as the button (i.e., to fit nicely in the row).

The current behaviour is that the progress spinner is too big. Code:

<div fxLayout="row">
  <button fxFlexAlign="start" mat-stroked-button>Do something</button>
  <mat-spinner *ngIf="loading"></mat-spinner>
</div>

I know there's a diameter property but I'm not sure which value I should set it with (if that's the only solution). I'd prefer to make the solution as dynamic as possible.

Answer 1

If you don't anticipate the height of the div to change too often (or you know and can hook into any events that affect it), you could set the spinner diameter dynamically based on the height of its container, something like this:

.html

<div #spinnerDiv class="spinner-container">
    <button mat-raised-button color="primary">Do something</button>
    <mat-spinner [diameter]="spinnerDiameter"></mat-spinner>
</div>

.css

.spinner-container {
    display: flex;
    flex-direction: row;
    height: 40px;
}

.ts

spinnerDiameter: number = 1; // Set to a low number to avoid affecting the container height
@ViewChild('spinnerDiv') spinnerDiv: ElementRef;

ngAfterViewInit() {
    // Wrap in a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError
    setTimeout(this.adjustSpinnerSize.bind(this), 100);
}

// Something happens that would cause the div height to change
someEvent() {
    this.adjustSpinnerSize();
}

adjustSpinnerSize() {
    this.spinnerDiameter = this.spinnerDiv.nativeElement.offsetHeight;
}

This is just a rough solution as I don't know how this will work with fxLayout - you'll have to fiddle around with the CSS - but you get the idea.