Angular Material Expansion panel with sub expansion panels

Question

Actually i have used angular material expansion panel (accordian) for panel expansions. So what i have tried is i just want to display child panels inside one parent expansion panel something like this. See picture below.

Databases is going to be the top level parent panel and inside of it i have different databases as child panels. For that i have written the code like this. But the code is not working means when i click on any parent panel inside child panel then everything gets collapsed. I mean to say the panels are collapsing. See code below:

<mat-accordion>

        <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Databases
              </mat-panel-title>
              </mat-expansion-panel-header>


              <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      MySQL
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>


                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                        Oracle
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>

                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                        Postgres
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>

                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                        SQLServer
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>

                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                        MongoDB
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>

          </mat-expansion-panel>
</mat-accordion>

My plan is to display only that particular panel only. This is very strange its not working for me. If i place expansion panels in seperate panels then working for me. Can anybody suggest me?

Meagre

Answer 1

As of today, you can. see this stackblitz

 <!-- level 01 -->
  <mat-accordion>
    <mat-expansion-panel
      (opened)="panelOpenState = true"
      (closed)="panelOpenState = false"
    >
      <mat-expansion-panel-header>
        <mat-panel-title>Week 01</mat-panel-title>
        <mat-panel-description>1 entry</mat-panel-description>
      </mat-expansion-panel-header>
      <mat-accordion>
        <mat-expansion-panel
          (opened)="panelOpenState = true"
          (closed)="panelOpenState = false"
        >
          <mat-expansion-panel-header>
            <mat-panel-title>Day 01</mat-panel-title>
            <mat-panel-description>Temperature warning</mat-panel-description>
          </mat-expansion-panel-header>
          <p>On day #1 of the 1nd week an alarm was raised</p>
        </mat-expansion-panel>
      </mat-accordion>
    </mat-expansion-panel>

    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>Week 02</mat-panel-title>
        <mat-panel-description>2 entries</mat-panel-description>
      </mat-expansion-panel-header>

      <!-- level 02 -->
      <mat-accordion>
        <mat-expansion-panel
          (opened)="panelOpenState = true"
          (closed)="panelOpenState = false"
        >
          <mat-expansion-panel-header>
            <mat-panel-title>Day 01</mat-panel-title>
            <mat-panel-description>Production success</mat-panel-description>
          </mat-expansion-panel-header>
          <p>On day #1 of the 2nd week The production was successful!</p>
        </mat-expansion-panel>

        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>Day 02</mat-panel-title>
            <mat-panel-description>2 entries</mat-panel-description>
          </mat-expansion-panel-header>

          <!-- level 03 -->
          <mat-accordion>
            <mat-expansion-panel
              (opened)="panelOpenState = true"
              (closed)="panelOpenState = false"
            >
              <mat-expansion-panel-header>
                <mat-panel-title>03:00</mat-panel-title>
                <mat-panel-description>Alarm</mat-panel-description>
              </mat-expansion-panel-header>
              <p>On day two at 3am was an alarm</p>
            </mat-expansion-panel>

            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>10:00</mat-panel-title>
                <mat-panel-description>Info</mat-panel-description>
              </mat-expansion-panel-header>
              <p>Delievery was successfull</p>
            </mat-expansion-panel>
          </mat-accordion>
        </mat-expansion-panel>
      </mat-accordion>
    </mat-expansion-panel>
  </mat-accordion>

Thermoelectric

This is great. is there a way to make multiple columns? – Phelgon

Answer 2

You can first have a mat-accordian, then one mat-expansion-panel "Databases" and then another div inside that mat-expansion panel. This div contains multiple mat-expansion panels such as "MySql" , "Oracle" etc.

Here:

<mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
         <mat-panel-title>
            Databases
         </mat-panel-title>
      </mat-expansion-panel-header>
      <div>
       <mat-expansion-panel>
          <mat-expansion-panel-header>
              <mat-panel-title>
            MySQL
              </mat-panel-title>
          </mat-expansion-panel-header>
       </mat-expansion-panel>
       <mat-expansion-panel>
          <mat-expansion-panel-header>
              <mat-panel-title>
            Oracle
              </mat-panel-title>
          </mat-expansion-panel-header>
       </mat-expansion-panel>
      </div>
    </mat-expansion-panel>
</mat-accordion>

Henriettahenriette

Answer 3

mat-expansion-panel does not currently support nesting. You should probably use mat-tree instead.

Bastille