Angular 6 mat-nav-list with mat-expansion-panel

Question

I'm trying to create a mat-nav-list which has mat-expansion-panels as list-items. The problem is, the mat-nav-list doesn't work as expected.The alignments are a mess and the expansion panels do not work properly. As I think, this happens because the mat-nav-lists don't support mat-expansion-panels as list items.(Correct me if I'm wrong)

My html code is as following

<mat-nav-list>
    <mat-list-item>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Personal data
        </mat-panel-title>
        <mat-panel-description>
          Type your name and age
        </mat-panel-description>
      </mat-expansion-panel-header>
      <mat-form-field>
        <input matInput placeholder="First name">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Age">
      </mat-form-field>
    </mat-expansion-panel>
  </mat-list-item>

  <mat-list-item>
    <mat-expansion-panel (opened)="panelOpenState = true"
                         (closed)="panelOpenState = false">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
        <mat-panel-description>
          Currently I am {{panelOpenState ? 'open' : 'closed'}}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
  </mat-list-item>
</mat-nav-list>

I will be thankful if someone can provide me a way to deal with this issue.

Answer 1

Instead of using mat-list-item you can have a div on for loop is iterated and in that you can add the expansion panel likewise

<div *ngFor="let hero of herolist">
   <mat-expansion-panel>
    // here you can do whateever you want
   </mat-expansion-panel>
</div>

If you want to achieve it with sidenav, you can have it

<ng-container>
    <mat-side-nav>
    </mat-side-nav>
</ng-container>