Angular allows you to modify the background color of the Mat-Expansion-Panel Title when it is clicked

Here is the Angular code snippet using Angular Material

<mat-nav-list role="list">
<a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" *ngIf="isSysAdmin"
    (click)="sideNavLink(true, $event)" matTooltip="Notification Templates" matTooltipPosition="right"
    [matTooltipDisabled]="!isCompressed" [routerLink]="['/email-notification-templates']" routerLinkActive="active"
    [routerLinkActiveOptions]="{exact:true}" class="admin-link">
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap add-padding">Email Templates</span>
  </a>
  <a >
  <mat-accordion *ngIf="isAdmin && !isCSR">
    <mat-expansion-panel hideToggle [(expanded)]="panelOpenState" class="mat-elevation-z0">
      <mat-expansion-panel-header>
        <mat-panel-title style="text-align: left;" (click)="clickNotificationMgmt($event)">
          <img src="../../../../assets/images/icon_bell.svg" alt="Notification Management">
          <span class="add-padding-to-mat-panel-header"><a class="list-item-setting add-padding"
              [routerLink]="['/notification-list']" routerLinkActive="active">Notification Management</a></span>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div>
        <mat-panel-description (click)="clickNotificationList($event)" [ngClass]="isNotificationListClicked ? 'bold' : ''"
          id="notificationListId" (click)="sideNavLink(true, $event)" class="mat-panel-description-setting"><a
            class="list-item-setting add-padding" [routerLink]="['/notification-list']"
            routerLinkActive="active">Notification List
          </a></mat-panel-description>
          </div>
    </mat-expansion-panel>
  </mat-accordion>
  </a>
</mat-nav-list>

Check out this screenshot for Email Templates

https://i.sstatic.net/c2Buf.png

The Notification Management title is displayed using Mat-Expansion-Panel - Accordion control.

If you need to achieve a similar look like Email Templates for Notification Managment, with the same background color on click and reset when user navigates away, here's how...

UPDATE

https://i.sstatic.net/ONOrC.png

The entire Accordion control changes background color. To only apply it to the Notification Management title, here's what to do...

Your assistance is greatly appreciated.

Answer №1

Utilize the expanded attribute to define the state of panelOpenState. Consider incorporating panelOpenState within an ngClass directive like so:

<mat-expansion-panel [(expanded)]="panelOpenState" [ngClass]="{'active-panel': panelOpenState}">

Then, ensure you have the active-panel class defined in your CSS:

.active-panel {
  background-color: /* your desired color */;
}

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

Creating a Docker image for an Angular application with Node.js

Currently, I am attempting to develop an Angular application within a Docker environment and then run it as a container locally using Node.js. I have utilized the following Dockerfile to build the image, however, I am unsure of what might be missing when ...

How can I make my image shine when the mouse hovers over

I have recently come across a fascinating effect where an image glows up when the mouse hovers over it. This is not your typical border glow, but rather a unique enhancement of colors within the image itself. I discovered a library called Pixastic that can ...

Add two columns for mobile devices in the Woocommerce platform

How can I display 2 columns of products in my Woocommerce shop using a child theme based on 'Shopisle'? Is a CSS-only solution the best approach for this task, and will it work smoothly without any bugs? I suspect that the theme is built on Boot ...

Tips for aligning uploaded files with img tags

Is there a way to align the img tag with the file upload input without using position:absolute, since it doesn't work well in responsive design? Are there any text-align/align-items/justify-content properties that can help align them? .input-file{ ...

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

determining the dimensions of a pixel based on the pixel density measurement

Can someone help me double-check my calculations? I am trying to figure out how many pixels are in the span of 13.6 millimeters for a specific device that has a resolution of 224.17 pixels per inch. (Given that 1 inch = 224.17ppi, therefore: 1 centimeter ...

Safari causing placeholders to be sliced

I'm having trouble creating attractive placeholders in Safari. This is how it currently appears. Codepen: https://codepen.io/anon/pen/RLWrrK https://i.sstatic.net/aChBs.png .form-control { height: 45px; padding: 15px; font-size: 16px; col ...

ngFor dynamically updates on its own

Here is a sample code snippet from the list-components: list.components.ts import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal'; import { EditModalComponent } from "...../edit-modal.component"; @Component({ selector: 'list& ...

Click anywhere on the body to conceal this element

I am currently working on a website where I have implemented a hidden menu that is functioning correctly. However, I want to make it so that when the menu is visible, users can click anywhere on the body to hide it. Unfortunately, my current code is not w ...

Bootstrap column links not functioning properly in IE/MS Edge upon page load

I recently encountered an interesting problem with my Bootstrap landing page. While it functions perfectly in Chrome and Safari, I discovered that some links cannot be clicked when using Microsoft's Edge Browser. You can view the live page at Slice V ...

Tips for creating dynamic animations in an opencart dropdown menu

Currently, I am in the process of enhancing my ecommerce website using OpenCart and I have been trying to incorporate a simple animation for the dropdown menu. However, despite applying the transition properties in the code snippet below, it seems that the ...

Fade out adjacent elements if currently visible using jQuery

Currently, I am attempting to devise a method to target all siblings and gradually fade them out before fading in the specific element that is being targeted. $('#MyDiv').siblings(':visible').not('h2').fadeOut('slow&apos ...

When navigating back, the Bootstrap Multistep Form breaks down

Tools I'm currently utilizing: HTML, CSS, Javascript, Bootstrap 3 Library / Package in use: https://codepen.io/designify-me/pen/qrJWpG Hello there! I am attempting to customize a Codepen-based Bootstrap Multistep Form from the provided link abov ...

The z-index overlapping problem in webkit browsers is a result of Angular 7 animations

I have implemented staggered animations in my Angular 7 application to bring elements to life upon page load. However, I am facing a strange z-index problem with one of my components. Here is the animation code: @Component({ selector: 'track-page& ...

What makes the nav class different from the navbar class in Bootstrap?

Recently, I delved into learning about bootstrap and web development. To my surprise, I stumbled upon the nav and navbar classes in bootstrap 4. I'm curious to know what sets them apart from each other and when it's best to use one over the other ...

Tips for adjusting the size of a background image using zoom

Currently, I am in the process of creating my first website. At this stage, it consists of a background image, an image, and a non-functional password input section. Everything seems to be going well so far. The background image fits perfectly on the scree ...

How to fix the error: ui-switch is not a recognized element in Angular 5?

Currently, I am attempting to utilize the ui-switch feature mentioned in this link. However, I have encountered an error: ng : ui-switch is not a known element ng : if ui-switch is An angular component then verify it's a part of this module ...

Issue with obtaining access token in Angular 8 authentication flow with Code Flow

As I work on implementing SSO login in my code, I encounter a recurring issue. Within my app.module.ts, there is an auth.service provided inside an app initializer. Upon hitting the necessary service and capturing the code from the URL, I proceed to send a ...

Determine the exact width of text without rounding in Javascript

I'm facing an issue with a div element that I'm manipulating using Javascript to change its position. The problem is that it's rounding off incorrectly. #hi{ background-color: blue; width: 2px; height: 10px; position: absolu ...

What is the best way to retrieve values from similar class/properties using Selenium in C#?

Currently, I am in the process of automating tests to compare expected and actual endorsements on a summary page. I am facing a challenge in reading all the endorsements values displayed on the summary page. The number of endorsements can vary from 2 to 5 ...