Angular Material spinner inline with input field

Question

I am generating a bunch of buttons under an input field that counts down to 0 when a correct number is entered. I'd like to add a progress spinner right next to (horizontally next to) the "n s left" display. I currently have:

  <mat-card class="card mat-elevation-z5">
      <mat-form-field>
        <mat-label>Username</mat-label>
        <input id="nameInput" matInput>
        <p matSuffix>{{timeLeft}}s left</p>
        <mat-spinner [diameter]="40"></mat-spinner>
      </mat-form-field>  
     <mat-button-toggle 
        *ngFor="let button of buttonsFromApi" 
        id="{{button.id}}">
        {{button.displayName}}
      </mat-button-toggle>
</mat-card>

My problem is, no matter how I try, the spinner ends up under the text, never next to it. I've tried a combination of flexboxes, additional divs, different layouts, and it never worked... How could I make sure that the inputfield is centered and in line with all the buttons (in a column) while having a spinner right next to the countdown? E.g. I have:

and I want:

CSS:

.card {
    min-width: 50%;
    display: flex;  
    flex-flow: column wrap;
  }
mat-form-field {
    font-size: 2em;   
    min-width: 50%;
}

Answer 1

You can try something like this:

<p matSuffix style="display: inline;">{{timeLeft}}s left</p>
<mat-spinner matSuffix [diameter]="18" style="float: right; margin-left: 8px"></mat-spinner>

You can also replace the <p> tag by a <span> that is inline by default.

Thanks Md. Rafee for the live example: stackblitz

Answer 2

Inside <mat-form-field> you could use the matSuffix with the spinner, just add some styling with display: inline-flex and you're ready to go:

<mat-spinner *ngIf="form.pending" matSuffix diameter="16" style="display: inline-flex"></mat-spinner>