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.