In "mat-expansion-panel", the panel is getting closed while routing

1k Views Asked by At

I am working on mat-expansion-panel for my sidemenu. I am trying to do the below example:

By default the panel should be closed, but while I click on any of the links and when its routing to other page the panel should be expanded. And when I click on any other panel this respective panel should be closed.

I am facing issue while routing to other pages the panel is getting closed.

Below is the code:

<mat-sidenav #sidemenu class="sidenav sidebar" 
    [attr.role]="(isHandset$ | async)? 'dialog':'navigation'"
    [mode]="(isHandset$ | async)? 'over':'side'"
    [opened]="(isHandset$ | async)" >

    <mat-nav-list>
        <mat-expansion-panel [expanded]="false">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    <a routerLink="/user" [routerLinkActive]="['active']"> User</a>
                </mat-panel-title>
            </mat-expansion-panel-header>
            <ul>
                <a routerLink="/loginUser" [routerLinkActive]="['active']"> Login </a>
            </ul>
            <ul>
                <a routerLink="/signInUser" [routerLinkActive]="['active']"> Sign In </a>
            </ul>
        </mat-expansion-panel>


        <mat-expansion-panel [expanded]="false">
            <mat-expansion-panel-header>
                <mat-panel-title>
                    <a routerLink="/Operator" [routerLinkActive]="['active']"> Operator </a>
                </mat-panel-title>
            </mat-expansion-panel-header>
            <ul>
                <a routerLink="/login" [routerLinkActive]="['active']"> Login </a>
            </ul>
            <ul>
                <a routerLink="/signIn" [routerLinkActive]="['active']"> Sign In </a>
            </ul>
        </mat-expansion-panel>

    </mat-nav-list>
</mat-sidenav>
0

There are 0 best solutions below