Hide mat-optGroup's label dynamically

Question

I am using mat-optgroup and mat-option to create a dropdown using angular material. In one case, I have mat-optgroup's label as empty. I don't want to show the label in that case. Is there an option to show/hide only label (not it's options) in mat-optgroup?

<mat-optgroup [class.active]="attributeGroup.groupName != ''" *ngFor="let attributeGroup of
filteredAttributeList | async"
              [label]="attributeGroup.groupName">
    <mat-option class="search-filter-options"
            *ngFor="let attribute of attributeGroup.groupValues"
            [value]="attribute.value">{{attribute.id}}</mat-option>
</mat-optgroup>

score 0 · Answer 1 · answered Mar 26 '21 at 13:36

You can add the class when the attributeGroup.group is empty and then use ::ng-deep to hide the label using css.

<mat-optgroup *ngFor="let group of pokemonGroups"
              [class.hideLabel]="group.name == ''"
              [disabled]="group.disabled"
              [label]="group.name">
  <mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
    {{pokemon.viewValue}}
  </mat-option>
</mat-optgroup>

::ng-deep .mat-optgroup.hideLabel .mat-optgroup-label {
  display: none;
}

Full example here: https://stackblitz.com/edit/angular-vuc2br?file=src/app/select-optgroup-example.ts

Hide mat-optGroup's label dynamically

1 Answers1