CODEWITHSUNDEEP
htmlangulartypescriptangular-materialhtml-select
Koen Rombout
Koen Rombout

Reputation: 257

Angular select button per option strange behavior

I have a question about my select. I have several options with the possibility to delete them. The delete button next to my option works perfectly, also the behavior of the delete.

But when I click an item, the text 'delete' appears next to my selected option.

enter image description here

Result when I click on one of my options:

enter image description here

<mat-form-field class="game-full-width" *ngIf="lotteryChoices$ | async; let options">
    <mat-select placeholder="Speelpot Type" formControlName="choiceType">
      <mat-option (click)="createLotteryChoice()">
        <i class="material-icons icon-add"> add </i> Nieuw Speelpot Type...
      </mat-option>
      <mat-option
        *ngFor="let option of options"
        [(value)]="option.choiceType"
        (click)="setChoiceType(option.choiceType, option.id)"
      >
        {{ option.choiceType }}
        <span class="delete-choice"
          ><button
            mat-flat-button
            matTooltip="Verwijder Speelpot Type"
            class="btn-delete"
            (click)="deleteChoiceType(option)"
          >
            <i class="material-icons icon-delete"> delete </i>
          </button></span
        >
      </mat-option>
    </mat-select>
  </mat-form-field>

How can I remove the text delete next to the option, without changing my options?

PS: I know some text is in dutch, but that's because it's for a customer in Belgium.

Upvotes: 0

Views: 146

Answers (1)

Koen Rombout
Koen Rombout

Reputation: 257

Solved my problem by using an <mat-form-field>

Thanks too anncb for posting a link with a similar topic

Upvotes: 1

Related Questions