79411340

Date: 2025-02-04 10:34:52
Score: 1
Natty:
Report link

enter image description here

If this is the wanted result you need to update the content of <mat-option> as it follows:

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    @for (topping of toppingList; track topping) {
    <mat-option [value]="topping">
      <div class="row">
        {{topping}} &nbsp;
        <button mat-button>Only</button>
      </div>
    </mat-option>
    }
  </mat-select>
</mat-form-field>

<style>
  .row {
    display: flex;
    flex-direction: row;
  }
</style>

For more infos on flex you could read this extensive guide and well written:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

P.S.

Of course using &nbsp; is not elegant nor the best way to space stuff, you can go forward and add padding etc...

Reasons:
  • Probably link only (1):
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Low reputation (1):
Posted by: hello-there-general-kenobi