Changing the background color of a mat-menu in Angular material through programming techniques

Question

Changing the background color of a mat-menu in Angular material through programming techniques

I am currently working on a mega menu and have the following code snippet:

<button mat-button [matMenuTriggerFor]="objectmenu">Objects</button>
        <mat-menu #objectmenu="matMenu" >
              <div class="menu-content" [style.backgroundColor]="getUnSelectedRandomColor()" style="height: 550px;">
                <div  fxFlex="100" fxFlex.gt-sm="30" fxFlex.sm="45" class="dropdown-menu-items"> 
                  <div class="dropdown-menu-btns" *ngFor="let parent of (objectList$ | async)"
                   (mouseover)="openCategory($event, 
                   parent)"
                   [style.background-color] = "this.selectedColor === (parent.categoryId * 100)  ? getSelectedRandomColor() : getUnSelectedRandomColor()"

                   >{{parent.name}}</div>
              </div>
                    <div class="theme-container">

                    <div class="theme-container" style=" padding-bottom: 0px !important; padding-top: 7px !important;">
                      <div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="center center" class="content border-lighter">
                        <div fxFlex="100" fxFlex.gt-sm="100" fxLayout="column" fxLayoutAlign="center center"> 
                            <h2 *ngIf="this.selectedCategory" class="uppercase">{{this.selectedCategory.name}}</h2>
                        </div>
                    </div>

                    <div class="content border-lighter" [style.backgroundColor]="getSelectedRandomColor()" style="height: 380px;">

                        <div fxLayout="row wrap" fxLayoutAlign="space-between"> 
                            <div fxFlex="100" fxFlex.gt-sm="70" fxFlex.sm="45" style="column-count: 2;"> 
                              <ul class="ht-dropdown megamenu-two d-flex"
                              *ngFor="let parent of (childCategories$ | async)" style="list-style: none;">

                               <label [routerLink]="['/products']" [queryParams]="{categories: parent.categoryId}"
                               routerLinkActive="router-link-active">{{parent.name}}</label>
                             <li *ngFor="let child of parent.childrenCategories"
                             [routerLink]="['/products']" [queryParams]="{categories: child.categoryId}"
                               routerLinkActive="router-link-active">
                               {{child.name}}

                           </li>
                         </ul>
                            </div>



                            <div fxFlex="100" fxFlex.gt-sm="30" ngClass.lt-md="pt-5" style="background-size: contain !important;"
                            [style.background]="selectedCategoryUrl"> 

                            </div>
                        </div> 

                    </div>


                    </div> 
                    <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" >
                      <img *ngFor="let brand of (relatedBrandsList$ | async)"  [src]=" brand.thumbnail | safeHtml" style="width: 110px; height: 110px; border-radius: 50%;"/>
                    </div>                     
                  </div>                    
                 </div>   


        </mat-menu>

After applying this code, I noticed that the top and bottom edges of the menu panel are not reflecting the dynamic background color generated by my Angular code using the getUnSelectedRandomColor() method. The getUnSelectedRandomColor() function is defined as follows:

openCategory(evt, category: Category) {
    this.selectedCategory = category;
    this.selectedCategoryUrl = `url('../../assets/categories/${category.categoryId}.webp')`;
    this.childCategories$ = this.store.pipe(select(getChildCategories(category.categoryId)));
    this.relatedBrandsList$ = this.store.pipe(select(getRelatedBrands(category.categoryId)));
    this.selectedColor = category.categoryId * 100;
    }

  getSelectedRandomColor() {
    const color = 'hsl(' + this.selectedColor + ', 30%, 75%)';
    return color;
    }
  getUnSelectedRandomColor() {
      const color = 'hsl(' + this.selectedColor + ', 30%, 86%)';
      return color;
    }

What steps can I take to ensure that the dynamic background colors are applied to all parts of the menu panel?

css angular angular-material

Answer 1

Answer №1

Enhancing Angular 9 Menu Functionality

When dealing with menu panel items in Angular 9, it's important to target the panelId property of MatMenu to make changes effectively. By obtaining the panel id and manipulating the element accordingly, you can modify the desired attribute using decorators like ViewChild and Renderer2 service.

For a practical demonstration, consider this example where I demonstrate dynamically altering the background color of the panel based on mouseover events from the menu items: interactive demo

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { MatMenu } from '@angular/material/menu/';

@Component({
  selector: 'my-app',
  template: './app.component.html',
})
export class AppComponent {
  @ViewChild('menu', {static: true}) menu: MatMenu

  constructor(private _renderer2: Renderer2) {
  }

  changeBackgroundPanel(colorValue: string) {
    const el = document.getElementById(this.menu.panelId);
    this._renderer2.setStyle(el, 'background', colorValue);
  }
}

<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
  <button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
  <button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
</mat-menu>

[Alternative Approach for Angular 8]

Check out a working example tailored for Angular 8 here: interactive demo

Component:

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  constructor(private _renderer2: Renderer2) {
  }

  changeBackgroundPanel(colorValue: string) {
    const el = document.getElementById('myPanelId');
    this._renderer2.setStyle(el, 'background', colorValue);
  }
}

Html:

<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
  <div id="myPanelId" class="menu-panel">
    <button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
    <button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
    <button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
  </div>
</mat-menu>

CSS:

.menu-panel {
  margin: -8px 0; 
  padding: 8px 0;
}

Answer 2

Enhancing Angular 9 Menu Functionality

When dealing with menu panel items in Angular 9, it's important to target the panelId property of MatMenu to make changes effectively. By obtaining the panel id and manipulating the element accordingly, you can modify the desired attribute using decorators like ViewChild and Renderer2 service.

For a practical demonstration, consider this example where I demonstrate dynamically altering the background color of the panel based on mouseover events from the menu items: interactive demo

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { MatMenu } from '@angular/material/menu/';

@Component({
  selector: 'my-app',
  template: './app.component.html',
})
export class AppComponent {
  @ViewChild('menu', {static: true}) menu: MatMenu

  constructor(private _renderer2: Renderer2) {
  }

  changeBackgroundPanel(colorValue: string) {
    const el = document.getElementById(this.menu.panelId);
    this._renderer2.setStyle(el, 'background', colorValue);
  }
}

<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
  <button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
  <button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
</mat-menu>

[Alternative Approach for Angular 8]

Check out a working example tailored for Angular 8 here: interactive demo

Component:

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  constructor(private _renderer2: Renderer2) {
  }

  changeBackgroundPanel(colorValue: string) {
    const el = document.getElementById('myPanelId');
    this._renderer2.setStyle(el, 'background', colorValue);
  }
}

Html:

<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
  <div id="myPanelId" class="menu-panel">
    <button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
    <button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
    <button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
  </div>
</mat-menu>

CSS:

.menu-panel {
  margin: -8px 0; 
  padding: 8px 0;
}

Answer 3

Answer №2

At last, the solution revealed itself:

::ng-deep .mat-menu-content{
            padding-top: 0px !important;
            padding-bottom: 0px !important;
          }

By applying the style mentioned above to remove the paddings, the white gaps vanished.

Answer 4

At last, the solution revealed itself:

::ng-deep .mat-menu-content{
            padding-top: 0px !important;
            padding-bottom: 0px !important;
          }

By applying the style mentioned above to remove the paddings, the white gaps vanished.

Changing the background color of a mat-menu in Angular material through programming techniques

Answer №1

Answer №2

Similar questions

Relocate the number of records displayed per page next to the pagination controls in datatables

A guide on updating CSS content dynamically within ExtJS

Reusing components in Angular 2 to dynamically display various data on a single page based on the service response

Incorporating the Vidyard embedded player within an Angular application

Overflow issue with Bootstrap 4 cards on small screens

When using Angular with WebApi, it is important to decide whether the models' first letter should be

How to target labels in CSS that end with a colon (*:)

What could be the reason for the meta viewport not functioning properly on Android devices with Cordova 5.1.1?

Encountering a hiccup with the Bootstrap navbar when attempting to create a collapsible feature

Vue.js does not support the usage of external JSON files directly within HTML documents

Button group malfunctions on smaller screens

Angular component: The selected property is not appearing set to false on the first click when using @

Display title using a jQuery toolbar

Developing Electron applications using Angular-CLI

In the mobile view of the jumbotron, there is a noticeable blank area on the right side

Move the first column to the right using BS4

Setting the x-api-key header with HttpInterceptor in Angular 4: A guide

creating a mixin for a box-shadow value of none in LESS CSS

Stop ngOnChanges from being triggered after dispatching event (Angular 2+)

What are some strategies for creating distinct identifiers for UI elements in Vaadin apps?