0

I'm trying to add a custom class to a mat-menu in my app, the value is visible to the component which includes this piece of HTMl and it evaluates to true on a DOM element sibling, but it doesn't really seem to apply to it when I inspect the resulting HTML, also the mat-menu container is added as a direct child to the body HTML element although the containing component is encapsulated into multiple angular components.

my HTML is as follows

        <mat-menu class="more-menu" [ngClass]="{ dutch: languageFlag === 'nl' }" #cardOptions="matMenu" xPosition="before" [overlapTrigger]="false">
          <button mat-menu-item>
            Button 1
          </button>
          <button mat-menu-item>
            Button 2
          </button>
        </mat-menu>

I can find the 'dutch' class added to other elements but not to the mat-menu

user1712638
  • 201
  • 2
  • 8
  • 22

1 Answers1

-1

Use class which is input property which takes classes set on the host mat-menu, element and applies them on the menu template that displays in the overlay container.

@Input('class') panelClass: string

<mat-menu class="customClass" #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Example

Chellappan வ
  • 23,645
  • 3
  • 29
  • 60
  • This doesn't really solve the issue, in the attached documentation and example there are no boolean evaluation or anything that allows the class to be added upon evaluation of the expression – user1712638 Nov 24 '19 at 10:42
  • 1
    You can use ternary operator to check condition here like this: [class]="languageFlag === 'n1' ? 'customClass' : ''" – Chellappan வ Nov 24 '19 at 11:36
  • I don't understand, what does this 'customClass' have to do with the @Input('class'), this doesn't seem mentioned anywhere in your example, could you explain to me what it is supposed to do in your attached example – user1712638 Nov 24 '19 at 14:13
  • Custom class is class which you want to add dynamically in your mat menu, I have used some random name. You can use Dutch or whatever as per your need – Chellappan வ Nov 24 '19 at 14:18
  • and what's the purpose of the @Input('class') since the expression is evaluated on the class attr on the mat-menu itself – user1712638 Nov 24 '19 at 14:33
  • mat-menu internally using @Input('class') panelClass: string to override default style – Chellappan வ Nov 24 '19 at 15:22
  • Hmm, should that be added to the declartion of the MatMenuModule itself then ? that would be helpful since the attribute I'm using is in my root component itself and all mat-menu elements should have it if the expression is evaluated to true, if it wouldn't be too much trouble, can you update your example with an example of the @Input('class') usage ? – user1712638 Nov 24 '19 at 15:34
  • I'm sorry but I don't seem to find any updates in the stackblitz example or any mention of the Input itself, however, I've tried the [class] attribute you've mentioned in the example and it worked, if it wasn't too much trouble can you explain why it worked while the [NgClass] example I posted in my question didn't, as I understand they're essentially the same thing – user1712638 Nov 24 '19 at 15:49
  • Actually mat-menu internally using class as a input property to add custom class to mat-menu. So In my example class is a not attribute it's a input property. you can check the soruce code of mat-menu here https://github.com/angular/components/blob/master/src/material/menu/menu.ts – Chellappan வ Nov 24 '19 at 15:58