Angular Components
Setproduct Design System
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>
{{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>
{{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>