Angular – How to add class on mat-menu overlay in Angular 5

angularangular-material2

I checked mat-menu API (https://material.angular.io/components/menu/api#MatMenu) but I couldn't find how to add a class on mat-menu cdk overlay.

I want to add a class on cdk overlay which contains mat-menu template. Can anyone help on the same?

I want to add class on parent cdk overlay because in responsive menu is not opening correctly. Check this below image.

Best Answer

Add backdropClass to the mat-menu, and then add style in the global style file. That cdk-overlay-pane is the one you want to style for, I think. For example:

<mat-menu #subMenu="matMenu" backdropClass="sg-vertical-sub-menu">
</mat-menu>

.sg-vertical-sub-menu+* .cdk-overlay-pane {
    margin-top: 12px;
}

Related Solutions

Javascript – Angular: conditional class with *ngClass

Angular version 2+ provides several ways to add classes conditionally:

type one

[class.my_class] = "step === 'step1'"

type two

[ngClass]="{'my_class': step === 'step1'}"

and multiple option:

[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

type three

[ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

type four

[ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

Angular 6 ‘mat-button-toggle’ is not a known element

mat-button-toggle is available as a part of the MatButtonToggleModule So you'll have to import that as well.

Add an import statement for the same in your AppModule:

import {MatButtonToggleModule} from '@angular/material/button-toggle';

And then add it to the imports array as well so that AppModule's templates can understand what mat-button-toggle is.

Also, I'm not really sure why you've exported these modules from your AppModule. We generally export anything from a module if we are planning on importing that module in some other module. But since this is the AppModule, and thus your RootModule, I don't think you'll be importing it in any other module. That might not be the case though.

Best Answer

Related Solutions

Javascript – Angular: conditional class with *ngClass

Angular 6 ‘mat-button-toggle’ is not a known element

Related Topic