title: Using MatExpansionPannel for Mrnu items and sub menu Items
body: <p>I'm using mat expansion pannel, Of Angular Material, for making Menubar and their submenus. I have achieved that target which I have thought but the problem is whenever I chose the submenu it switched to the other page but the expansion panel get close.</p>
  <p>Is there any possibility to make the expansion panel remain open and the submenu remains active unless we are on that page?</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;ul class=&quot;menubar-container&quot; [class.toggle-menu]=&quot;toggleNav&quot;&gt;
      &lt;mat-accordion&gt;
  
          &lt;li
          class=&quot;menu-item&quot;
          *ngFor=&quot;let menu of menus&quot;
          &gt;
              &lt;mat-expansion-panel
              (opened)=&quot;panelOpenState = true&quot;
              (closed)=&quot;panelOpenState = false&quot;
              &gt;
                  &lt;mat-expansion-panel-header&gt;
                      &lt;mat-panel-title&gt;
                          &lt;span class=&quot;material-icons menu-icon-wrapper&quot;&gt;
                              {{ menu.menuIcon }}
                          &lt;/span&gt;
                          &lt;p class=&quot;link-text&quot;&gt;
                              {{ menu.menuItemName }}
                          &lt;/p&gt;
                      &lt;/mat-panel-title&gt;
                  &lt;/mat-expansion-panel-header&gt;
                  &lt;div class=&quot;submenu-items&quot; *ngFor=&quot;let submenu of submenus&quot;&gt;
                      &lt;a
                          *ngIf=&quot;isEng == true&quot;
                          (click)=&quot;
                          Redirect(submenu.formPath, submenu.moduleID, submenu.desc_En, submenu.desc_Ar)
                          &quot;
                          class=&quot;submenu-item-link pl-4&quot;
                      &gt;
                          &lt;span class=&quot;material-icons submenu-icon&quot;&gt;
                              keyboard_arrow_right
                          &lt;/span&gt;
                          {{ submenu.desc_En }}
                      &lt;/a&gt;
                      &lt;a
                          *ngIf=&quot;isEng == false&quot;
                          (click)=&quot;
                          Redirect(submenu.formPath, submenu.moduleID, submenu.desc_En, submenu.desc_Ar)
                          &quot;
                          class=&quot;submenu-item-link pr-4&quot;
                      &gt;
                          &lt;span class=&quot;material-icons submenu-icon&quot;&gt;
                              keyboard_arrow_left
                          &lt;/span&gt;
                          {{ submenu.desc_Ar }}
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/mat-expansion-panel&gt;
          &lt;/li&gt;
  
      &lt;/mat-accordion&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>Please Let me know if someone has any suggestions.</p>