What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected.

I tried to add a custom class to the mat-menu element using both the class and panelClass attributes. Here is the code snippet:

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


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

Unfortunately, neither of the above code snippets worked for me.

The desired outcome is to successfully apply a custom class alongside the cdk panel class when Angular Material opens the menu cdk overlay.

htmlcssangularangular-materialangular7

Answer №1

Give this a try in your css... the hierarchy of elements is intricate and unique when inspecting:

::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 want to use your own class, make sure to target the correct panel with your specific css:

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

Here's the 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 view a live example here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sign up for a variety of HTTP observables subscriptions

I have a collection of Observables stored in activatedRoute.data.example and I need to listen for the most recent value emitted. private data$ = forkJoin( this.activatedRoute.data.pipe( map(({ examples }) => examples) ) ); ngOnInit(): void { ...

angularrxjs

Access a PDF document in a new tab and save it with a specific file name using Angular

I am facing a challenge in Angular where I want to open a PDF file in a new tab and enable the user to download it with a specific name (Example.pdf). The current code successfully downloads the PDF but does not open a new tab (target=_blank is ineffecti ...

angular

Passing an event between components in AngularDart

Two components, componentA and componentB, are siblings within the structure of componentMother. When componentA is clicked, an event is triggered and handled by event handlerA. How can this event be passed to componentB and handled by event handler B? W ...

angulardartangular-dart

Embedding content within a toggle slider

As a beginner in CSS, I have a simple question that needs addressing. I am unsure which class to begin with for my task. The goal is to insert text (specifically, two digits) neatly inside toggle buttons (the slider that moves and appears white). I am u ...

htmlcss

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...

htmlcsstwitter-bootstrapbootstrap-4

Steps to customize the appearance of a button within a file input field

When implementing the file input in my code on a Mac, I noticed that the alignment appears off. On all other devices, it looks just fine. However, when I try to apply a style specifically to the 'Choose file' button, the style also gets applied t ...

htmlcssalignment

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

javascriptjquerycss

What is the best way to connect added elements together?

I am currently utilizing Plupload to upload files. Due to specific requirements, I need to place FilesAdded "inside" init as demonstrated below. The issue I'm facing is the inability to utilize jQuery.remove() on elements that have been appended usin ...

jqueryhtmlplupload

Angular 7 router navigate encountering a matching issue

I created a router module with the following configuration: RouterModule.forRoot([ {path: 'general', component: MapComponent}, {path: 'general/:id', component: MapComponent}, {path: '', component: LoginComponent} ]) Sub ...

javascriptangulartypescriptangular-routerangular9

Show HTML element after scrolling 50 pixels on the page

I am looking to add a feature in my Angular application where a DOM element becomes visible as soon as the user scrolls down by 50 pixels. Is there a method or process available within Angular to achieve this effect? ...

cssangularjsscrollangularjs-directive

Tips for rearranging table columns using drag and drop in react js

I have been experimenting with various libraries to create a drag-and-drop feature for changing table columns order. Here is my current implementation: import React, { useState } from 'react'; import './list_de_tournees.css' const Table ...

javascripthtmlreactjshtml-tabledrag-and-drop

Align three divs with three columns in the horizontal center

I am facing a challenge where I need to perfectly center 3 col3 divs in a row. Despite the calculation showing 1.5, I am unsure of the proper method to overcome this hurdle. <div class="row"> <div class="col-md-offset-2 col-md-3" style="height: ...

htmlcsstwitter-bootstrap

Aligning images in center of list

I'm in need of some CSS expertise to assist with this layout. Here is the current structure: <div class="movieList"> <div class="image" selected = true> <img class="poster" src="image1" selected = true/> </div> <d ...

htmlcssasp.net-mvc

Attempting to search for an item by its id within a local json file using Angular

I have a local JSON file containing Kitchen types. I created the KitchenTypesService with two functions inside, GET and FIND(ID). The GET function is working fine, but the FIND function is not working and displaying an error "ERROR TypeError: Unable to lif ...

jsonangulartypescriptrxjsfind

How to Properly Wrap Sub-Menu Elements in WordPress with Div Tags

I am currently working on styling my WordPress sub menu list items using HTML. I have written the HTML code that I want to use, but I am not sure how to incorporate it into the wp_nav_menu() function. Can you assist me with this? <ul class="menu"> ...

htmlcsswordpress

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail

Exploring various viewport dimensions using Django and Selenium

I am currently experimenting with testing the characteristics of specific UI elements at various viewport sizes and media query breakpoints defined in CSS. Initially, I have a setup function that initializes a headless Chrome browser with what I believe is ...

pythoncssdjangoseleniumtesting

How to Restrict the Use of Conditional "If" Statements in Another Function in Angular 7

How can I use an IF condition inside a function to only execute once for a specific action and not for another action? I have a function that is called twice, but I want the first "IF" condition inside the function to only be triggered when the add bank b ...

javascriptangular

Utilizing Regular Expressions to remove specific CSS attributes from an HTML content

I'm facing a challenge with my telerik RadEditor where users can input HTML that gets saved to my database. While this usually works well, I encounter issues when the CSS attributes position: absolute; or z-index: 100; (any # for z-index) are present ...

htmlcssregexvb.nettelerik

Can someone provide guidance on integrating UI components with Angular 8?

I have developed my own custom component called app-button.ts. This component is responsible for checking the current user's roles and rendering the button only if it matches the defined roles. The ButtonType property is used to specify the style of ...

angularunit-testingjasmine