Can you provide me with information on how to indicate the activated menu item by highlighting the triggering button in Angular 14 and Material Design?

Is there a way to highlight the triggering button in an Angular Material menu, while also highlighting a menu item that matches a routerLink?

<button mat-button [matMenuTriggerFor]="animals">Animal index</button>
<mat-menu #animals="matMenu">
  <button mat-menu-item routerLink="/vertebrates" routerLinkActive="active-menu-item">Vertebrates</button>
  <button mat-menu-item routerLink="/invertebrates" routerLinkActive="active-menu-item">Invertebrates</button>
</mat-menu>

Are there any Angular directives available or CSS tricks that can achieve this effect?

cssangularangular-materialmenu

Answer №1

Although the Mat menu does not provide built-in directives for this functionality, you can utilize the isActiveChange event to determine if any of the items in the menu are active

<button mat-button [matMenuTriggerFor]="animals" [ngClass]="{'is-option-active': isOptionActive}">Animal index</button>
<mat-menu #animals="matMenu">
  <button mat-menu-item routerLink="/vertebrates" routerLinkActive="active-menu-item" (isActiveChange)="onRouterLinkActive($event)">Vertebrates</button>
  <button mat-menu-item routerLink="/invertebrates" routerLinkActive="active-menu-item" (isActiveChange)="onRouterLinkActive($event)">Invertebrates</button>
</mat-menu>

.is-option-active {
 // add custom highlighting styles here
}

isOptionActive = false;

constructor(private router: Router) {
  this.router.events.subscribe((ev) => {
    if (ev instanceof NavigationEnd) {
      this.isOptionActive = false;
    }
  });
}

onRouterLinkActive(ev) {
  if (this.isOptionActive === false && ev === true) {
    this.isOptionActive = true;
  }
}

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

Methods to Maintain Consistent HTML Table Dimensions utilizing DOM

I am facing an issue with shuffling a table that contains images. The table has 4 columns and 2 rows. To shuffle the table, I use the following code: function sortTable() { // Conveniently getting the parent table let table = document.getElementById("i ...

javascripthtmlcssdom

What is the best way to switch between my two images upon clicking?

When I click on an image, it changes to a different image. I achieved this by altering the source of the image upon clicking. Now, my goal is to incorporate a smooth transition between the two images after they are clicked. I attempted to stack the two im ...

javascripthtmlcssimage

Is it possible to arrange JSON Objects vertically on a webpage using tables, flexboxes, divs, and Javascript?

Within my JSON data, I have multiple products defined. My goal is to loop through this JSON and display these products side by side on a web page for easy comparison. Initially, I envision structuring them in columns and then rows: https://i.sstatic.net/K ...

javascripthtmlcsshtml-tableflexbox

What is causing all three boxes to shift when I'm attempting to move just one of them?

Seeking assistance with a problem I'm encountering. As I work on creating my website, I've run into an issue where trying to move one of the three individual boxes (as shown in the image) causes all three of them to shift together. You can view t ...

htmlcsswebmargin

Angular 2: Transforming File into Byte Array

Is there a preferred method in Angular2 for converting an input file (such as an image) into a byte array? Some suggest converting the image to a byte array and then sending it to a Web API, while others recommend sending the File "object" to the API for ...

angulartypescriptasp.net-web-api2

Try out Playwright for testing Angular form controls

I'm currently examining a form control using the Playwright framework. The structure of the DOM is as follows: <div class="form-group"> <label for="usernameInput">User name</label> <input type="text" ...

angularplaywright

Issue with Material UI styles not applied in component (alert: multiple occurrences of `@material-ui/styles`)

I have developed a standalone React component that utilizes the Material UI (4.8.3) library and have uploaded it to a private NPM package for use across various applications. The standalone component project is functioning properly (tested using Storybook ...

javascriptcssreactjsmaterial-ui

There seems to be an issue with the functionality of Angular Material in Angular9

I've encountered an issue with the material form field, even after importing the necessary modules. Surprisingly, there are no console errors to provide more insight into the problem. { "name": "online-shop", "version": "0.0.0", "scripts": ...

htmlangularangular-materialhtml5-canvasangular9

Tips for aligning text and an image next to each other within a table column using HTML

I have a table where I am displaying an image and text in separate columns, with the image above the text. However, I want to showcase them side by side and ensure that the table fits perfectly on the screen without any scroll bars. Here is my HTML code s ...

htmlcss

Create a CSS style to set the background with a half height positioned behind the

I am looking to create a div with a background and overlay effect. Here is what I have done so far: https://i.sstatic.net/hVkBd.jpg I want it to look like this: https://i.sstatic.net/rQvcm.jpg body { background: blue; } .wrap { height: 300px; wi ...

htmlcss

Error when navigating to a dynamic parameter path using Angular Router

I'm trying to redirect a user to a path with a unique UUID when they go to the root URL (localhost:4200). However, I encountered the following error: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'document/4fdb ...

javascriptangularangular-routing

Is the communication between Angular service and component failing when using ngFor?

I am currently using Angular to create a video game page. When a specific title is clicked, the id is sent to make an API call with that specific id. I am able to retrieve the data in the selected-games component where I intend to use it, but when I use ng ...

angulartypescript

Encountering an issue where the Angular build is unable to locate the installed Font-Awesome node module

Every time I attempt to compile my project using ng build --prod, I encounter the following error: ERROR in ./src/styles.scss Module build failed: ModuleBuildError: Module build failed: Error: Can't resolve '~font-awesome/css/font-awesom ...

javascriptnode.jsangularnpmfont-awesome

HTML5: Enhancing Video Playback on the iPad with Custom Zoom Controls

I've customized a smaller UIWebView specifically for the iPad, and I've created my own HTML5 controls for the video playback. However, when I try to maximize the video, all I see is a black screen instead of the actual content. The audio still pl ...

javascriptcssipadhtml

Add a new class to an element located in a separate div using JavaScript

$(document).ready(function() { $('.btn').click(function() { $(this).parent().addClass('show'); }); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div clas ...

javascriptjqueryhtmlcss

Angular does not seem to be identifying the project name as a valid property

After installing Angular materials using the CLI, I decided to check my angular.json file and encountered an error in the console stating that "Property MEAN-APP is not allowed". [The name of my Angular project is MEAN-APP] Here's a screenshot of the ...

javascriptjsonangularwebfrontend

Using shadow effects on the <Grid> component with Material UI

Is there a way to implement the box-shadow property on a <Grid> component in Material UI? I've gone through the official documentation regarding Shadows - Material UI, but I'm struggling to grasp how it can be applied to a <Grid>. De ...

cssreactjsmaterial-ui

The challenge of incorporating mod_rewrite with CSS files

I am new to mod_rewrite. I have a page profiles.php?page=XXX and I tried to change its URL to something more friendly like /cars/XXX/ RewriteEngine on RewriteRule ^cars/([^/]+)/?$ profiles.php?page=$1 [L] The issue arises when including styles: <li ...

phpcssmod-rewriteradix

Combining element.scrollIntoView and scroll listener for smooth scrolling by using JavaScript

Can element.scrollIntoView and a "scroll" event listener be used simultaneously? I'm trying to create code that checks if the user has scrolled past a certain element, and if so, automatically scrolls smoothly to the next section. I attempted to achi ...

javascripthtmlcss

Is there a way to change the CSS of a sibling element when hovering over it

Imagine a scenario where hovering over one row changes its color. However, what if we want all rows of the same color to highlight when any row is hovered over? Is it possible to achieve this using just CSS? .red-row:hover { background-color: red; } ...

htmlcss