Angular Components
Setproduct Design System
MatMenu works like the original component
RichMenu
We added additional appearance for menu item, wich can be applied by using few directives. Rich menu item offers styling for subtext and short value content in addition to menu item lable
<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>
Properties
Name | Default value |
---|---|
@Input() highlighted | true |
Refer to the original Angular Material component API