One of the buttons attached to a mat-menu has a red background when clicked.
If you want to see it in action, check out this Stackblitz.
.list-item.error {
background-color:#FCE8FF;
}
However, if the button is clicked more than two times, the color should change to:
list-item.seen {
background-color: lightgray;
opacity: .5;
}
The functionality can be achieved using these classes:
[class.seen]="!seenMe"
[class.error]="true"
Here's the HTML code:
<button mat-icon-button
(click)="openMe()"
[matMenuTriggerFor]="notify">
<mat-icon>
warning
</mat-icon> Click Me
</button>
<mat-menu #notify="matMenu" class="mat-menu-notify">
<mat-dialog-content (click)="stayOpen($event);">
<mat-list >
<div >
<mat-list-item [class.seen]="!seenMe"
[class.error]="true"
class="list-item">
<span class="message">
I was here
</span>
</mat-list-item>
</div>
</mat-list>
</mat-dialog-content>
</mat-menu>
And the corresponding TypeScript code:
notSeenYet = true;
get seenMe(): boolean|undefined {
return this.notSeenYet;
console.log(this.notSeenYet);
}
openMe(): boolean{
return this.notSeenYet = false;
}