Get started   Components   Icons   What's New
  Get a License
⚡️New Release! Material X components for Angular⚡ view demo
Appearance
Color
Change filter for code updates
HTML
TS
<button mat-button
        [matMenuTriggerFor]="menu"
        color="primary">
        Group
    <set-icon class="is-solid"
              shape="arrow_drop_down"
              size="24">
    </set-icon>
</button>
<mat-menu #menu="matMenu">
  <ng-container *ngFor="let item of menuContent">
    <a mat-menu-item
       *ngIf="item.text !== 'Notification'"
       (click)="toggleactiveMenuItem(item)"
       [ngClass]="{'set-menu-item-active': item === activeMenuItem}">
      <set-icon [attr.shape]="item.icon"></set-icon>
      &nbsp;&nbsp;
      {{item.text}}
    </a>
    <a mat-menu-item
       *ngIf="item.text === 'Notification'"
       (click)="toggleactiveMenuItem(item)"
       [ngClass]="{'set-menu-item-active': item === activeMenuItem}"
       [matMenuTriggerFor]="menunotification">
      <set-icon [attr.shape]="item.icon"></set-icon>
      &nbsp;&nbsp;
      {{item.text}}
    </a>
  </ng-container>
</mat-menu>
<mat-menu #menunotification="matMenu">
  <div mat-menu-item mat-rich-menu-item
       [highlighted]="item.time"
       (click)="checkNotification(item)"
       *ngFor="let item of notificationMenu">
    <div mat-rich-menu-label-wrapper>
      {{item.text}}
      <div mat-rich-menu-subtext *ngIf="item.subtext">{{item.subtext}}
      </div>
    </div>
    <set-icon *ngIf="item.icon" [attr.shape]="item.icon"></set-icon>
    <div mat-rich-menu-item-value *ngIf="item.time">{{item.time}}</div>
  </div>
</mat-menu>