CODEWITHSUNDEEP
angularangular-material
Robin De Schepper
Robin De Schepper

Reputation: 6365

adding html to the mat-optgroup label

Is it possible with Angular Material to give a HTML template for the label of an optgroup of an autocomplete component, instead of binding a string to the label input? The label property escapes any HTML tags.

Upvotes: 3

Views: 5749

Answers (1)

Amir Arbabian
Amir Arbabian

Reputation: 3699

I've played a little bit, and it looks like you can do that, you just need to remove [label] input value and put your custom template inside of <mat-optgroup> like:

<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>

Example on stackblitz (I put buttons instead of plain labels). Hope that helps.

Upvotes: 11

Related Questions