Create nested html structure

Question

Check following link for that I'm trying

https://stackblitz.com/edit/angular-zrfqxx?file=app%2Faccordian-component.ts

I have following json

data = {
    a: {
        b: "abc",
        c: [
            {
                d: "pqr",
                e: true
            },
            {
                f: 1,
                e: ["xyz", 1]
            }
        ]
    }
}

Now I'm trying to create a html structure for above json in angular 2

1. If object is present then show accordion
2. If object in list then show tab in accordion
3. If list present then show data in ul list
4. If object in object the show accordion in accordion

I'm Trying to do this

<div class="confirmation-dialog">
  <div class="mdl-grid">
    <button mdl-button mdl-button-type="icon" mat-dialog-close class="mdl-dialog__close">
      <mdl-icon>close</mdl-icon>
    </button>
    <div class="mdl-cell mdl-cell--12-col">
      <div mat-dialog-content>
        <mat-card>
          <mat-card-header>
          </mat-card-header>
          <mat-card-content>
            <mat-accordion>
              <mat-expansion-panel *ngFor="let key of objectKeys(nodes)">
                <mat-expansion-panel-header>
                  <mat-panel-title>
                    {{key}}
                  </mat-panel-title>
                </mat-expansion-panel-header>
                <mat-form-field>
                  <label>b</label>
                  <input matInput placeholder="abc" readonly>
                </mat-form-field>
                <mat-accordion>
                  <mat-expansion-panel *ngFor="let item of objectKeys(nodes[key])">
                    <mat-expansion-panel-header>
                      <mat-panel-title>
                        {{item}}
                      </mat-panel-title>
                    </mat-expansion-panel-header>
                    <mat-form-field>
                      <input matInput placeholder="data">
                    </mat-form-field>
                  </mat-expansion-panel>
                </mat-accordion>
              </mat-expansion-panel>
            </mat-accordion>
          </mat-card-content>
        </mat-card>
      </div>
    </div>
  </div>
</div>

But How I display nested accordian, tab and data inside the each