how can i apply custom class next to cdk-overlay-pane for material menu in angular 7

2
votes

i have requirement where i want to create mega menu using angular material menu. now i want apply some style to cdk-overlay-pane using own custom class for that i used class and panelClass attribute but doesn't work for me.

i tried to apply custom class on using class and panelClass attribute. please check below code

<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass='CustomClass'>


<mat-menu #menu="matMenu" [overlapTrigger]="false" class='CustomClass'>

none of above code is working for me.

it should be apply custom class next to cdk panel class when angular material open menu cdk overlay

1
htmlcssangularangular-materialangular7
where is the code? – Akber Iqbal
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass='CustomClass'> – Amit Ghuge
<mat-menu #menu="matMenu" [overlapTrigger]="false" class='CustomClass'> – Amit Ghuge
update the answer to change styling based on your own custom class – Akber Iqbal

1 Answers

1
votes

Try this in your css... the hierarchy is quite unique and complex when you open up the inspect element:

::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content { background: lightblue }
::ng-deep .cdk-overlay-pane .mat-menu-panel .mat-menu-content .mat-menu-item {color: blue;}

Update:

if you'd like to use your own class, then refer to the correct panel using your class relevant css:

::ng-deep .customClass .mat-menu-content {border:1px solid red; background:lightblue}
::ng-deep .customClass .mat-menu-content .mat-menu-item {color:blue;}

relevant HTML:

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu" class='customClass' >
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

you can see a working example here