How to make expansion panel stop expanding in Angular

Question

I'm using expansional panel in my Help Dialog but for FAQ section I don't have any sub title so I'm trying get rid of expansion action and also the arrow icon on the right side but not really sure how to do that so I would be really appreciate if I can get any suggestion or help.

I tried to replace it using mat button but the text is not aligning with other text above even though I did align: left for mat button and I'm not sure this might be the best solution.

                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        Chart
                      </mat-expansion-panel-header>     
                  <a mat-list-item routerLink (click)="clicked(4)" >Editing and Creating a Chart</a>
                  <a mat-list-item routerLink (click)="clicked(5)">Maxis Chart JSON Mapping</a>
                    </mat-expansion-panel>
                  </mat-nav-list>

                  <mat-nav-list>
                    <mat-expansion-panel>
                      <mat-expansion-panel-header>
                        FAQs
                      </mat-expansion-panel-header>     
                    </mat-expansion-panel>
                  </mat-nav-list>

//just testing with mat button to see how it look
                  <mat-nav-list>
                    <button mat-raised-button style="width: 304px; text-align:left; height: 47px;">FAQs</button>
                  </mat-nav-list>
            </div>

Thanks, it get rid of the arrow but it still keep expanding without any header. — Aase Zi

Tomasz Vizaint Tomasz Vizaint · Accepted Answer · 2020-07-22T21:13:56

Ok in

<mat-expansion-panel hideToggle> 
    <mat-expansion-panel-header>
     <mat-panel-title>
            Chart
     </mat-panel-title>
     <mat-panel-description>
        here You make add header description 
     </mat-panel-description>
    </mat-expansion-panel-header> 
</mat-expansion-panel>

How to make expansion panel stop expanding in Angular

1 Answers