Search code examples
cssangularsassangular-material

Change background color of the Mat-Expansion-Panel Title on click of it in Angular

Below is the code I am using in Angular 15 with Angular Material 14

<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>

Below is the screenshot for Email Templates

Email Templates

Here Notification Management is an Mat-Expansion-Panel - Accordion control.

How can I display the same way as Email Templates for Notification Managment, I mean with the same background color on click of it and if the user navigates away from it, then it should come back to normal state without highlighting.

EDIT

Notification Management

Now the whole Accordion control is changing background color. I need it only for the Notification Management title. How can we achieve this..?

Any help would be greatly appreciated.

Solution

  • You are already using the expanded attribute to set panelOpenState. Then, how about using panelOpenState into an ngClass ? Something like :

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

    Then just set the active-panel class in your css:

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