добавление html к метке mat-optgroup

Question

Возможно ли с Angular Material дать шаблон HTML для метки optgroup компонента автозаполнения вместо привязки строки к вводу label?Свойство label экранирует любые теги HTML.

Answer 1

Я немного поиграл, и похоже, что вы можете сделать это , вам просто нужно удалить [label] входное значение и поместить свой пользовательский шаблон внутри <mat-optgroup> как:

<mat-autocomplete #autoGroup="matAutocomplete">
        <mat-optgroup *ngFor="let group of stateGroupOptions | async">
          <!-- here i put my custom button instead of label --->
          <button mat-raised-button color="primary">{{group.letter}}</button>
          <mat-option *ngFor="let name of group.names" [value]="name">
            {{name}}
          </mat-option>
      </mat-optgroup>
</mat-autocomplete>

Пример stackblitz (я ставлю кнопки вместо простых меток).Надеюсь, это поможет.