Angular Material accordion/expansion deletable panels

Panels/Cards in Accordion :

Cards layout (also deletable)

Open first panel:

Open second panel: 

Prerequisites:

@angular/material v8.2.3

1. Component - HTML

         <div *ngIf="banks.length" class="bank-accounts-overview">
                <mat-accordion>
                    <div *ngFor="let bank of banks; let i = index;">
                        <div id="id{{i}}">
                            <mat-expansion-panel hideToggle="true" #xyz>
                                <mat-expansion-panel-header [collapsedHeight]="'12vh'" [expandedHeight]="'12vh'">
                                    <mat-panel-title>
                                        <div class="bank-header-entry">
                                            <div class="bank-entry" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2.31vw">
                                                <span>{{bank.bankName}}</span>
                                                <span class="balance">{{bank.totalBalance}} €</span>
                                            </div>
                                        </div>
                                    </mat-panel-title>
                                    <mat-panel-description>
                                        <div style="position:absolute; right:0; margin-right: 10px;">
                                        <button (click)=deleteCard(i) type="button" mat-icon-button matSuffix>
                                            <mat-icon>delete_forever</mat-icon>
                                        </button>
                                        </div>
                                    </mat-panel-description>
                                </mat-expansion-panel-header>
                                <div *ngFor="let account of bank.accounts">
                                    <mat-divider></mat-divider>
                                    <div class="jhi-bank-account-entry" matRipple>
                                        <div class="bank-account-entry" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2.70vw">
                                            <mat-icon>arrow_forward</mat-icon>
                                            <span>{{account.accountName}}</span>
                                            <span class="balance">{{account.balance}} € </span>
                                        </div>
                                    </div>
                                </div>

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

            </div>

2. Component - TS

@Component({

  selector: 'accounts-overview',

  templateUrl: './accounts-overview.component.html',

  styleUrls: ['./accounts-overview.component.scss']

})

export class AccountsOverviewComponent implements OnInit {

  banks: any[] = [];

  constructor(private renderer: Renderer2) {

    this.banks = [

      {

        bankName: 'Bank 1',

        icon: 'account_box',

        totalBalance: 214000,

        hide: false,

        accounts: [{accountId:'1',bankName:'Bank 1',icon:'account_box',accountName:'Account 1',balance:20000},

          {accountId:'1',bankName:'Bank 1',icon:'account_box',bankLoginId:'idxxx',accountName:'Account 1',balance:432000,iban:'XXXA4RRT5',bic:'Bic',hidden:false}]

      },

      {

        bankName: 'Bank 2',

        icon: 'account_box',

        totalBalance: 1645000,

        hide: false,

        accounts: [{accountId:'1',bankName:'Bank 1',icon:'account_box',accountName:'Account 1',balance:17000},

          {accountId:'1',bankName:'Bank 1',icon:'account_box',bankLoginId:'idxxx',accountName:'Account 1',balance:4.000,iban:'XXXA4RRT5',bic:'Bic',hidden:false}]

      },

      {

        bankName: 'Bank 3',

        icon: 'account_box',

        totalBalance: 145.000,

        hide: false,

        accounts: [{accountId:'1',bankName:'Bank 1',icon:'account_box',accountName:'Account 1',balance:150.000},

          {accountId:'1',bankName:'Bank 1',icon:'account_box',bankLoginId:'idxxx',accountName:'Account 1',balance:12.000,iban:'XXXA4RRT5',bic:'Bic',hidden:false}]

      }

    ];

  }

  ngOnInit(): void {

  }

  deleteCard(id: number): void {

    const parent: HTMLElement | null = document.getElementById('id'+id);

    if (parent !== null) {

      const child = parent.children[0];

      this.renderer.removeChild(parent, child);

    }

  }

}

3. Component - CSS

.bank-header-entry {

  width: 80vw;

}

.bank-accounts-overview {

  padding: 1.5vh;

}

.jhi-bank-account-entry {

  padding-top: 3.9vh;

  padding-bottom: 3.9vh;

  padding-left: 30px;

}

button.mat-raised-button {

  height: 6.25vh;

  font-size: 2.08vh;

  line-height: 2.6vh;

  border-radius: 0;

}

h1 {

  font-size: 2.92vh;

  line-height: 3.64vh;

  text-align: center;

  width: 100%;

}

@media (hover: hover) {

  .jhi-bank-entry:hover,

  .jhi-bank-account-entry:hover {

    background-color: #d2d2d2;

  }

}

.bank-entry {

  width: 100%;

}

.logo {

  width: 5.21vh;

  height: 5.21vh;

}

span {

  font-size: 2.08vh;

  line-height: 2.6vh;

  font-weight: bold;

}

.balance {

  margin-left: auto;

}

.bank-account-entry {

  width: 90%;

}