List alpha scroll - Accordion

Hey all,

I am using the following plugin:

My html is set up and now reads:

 <ion-content class="alpha-list-page">

          **<ng-template #alphaScrollItemTemplateRef let-item>**
**            <ion-item (click)="currentPageClass.onItemClick(item)">{{item.firstName}} {{item.lastName}}</ion-item>**
**          </ng-template>**


I have also an array .ts:
let newArray = {‘firstName’: ‘XY’, ‘lastName’: ‘YX’, ‘phoneNumber’: ‘555555’, ‘emailAddress’: ‘’};

My question is: how can i set up “ng-template” to be also able to click on an item and view extra details such as phoneNumber and emailAddress?
So a simple collapsible/accordion is needed with ng-template.

My html would be without alpha scroll something like this:

<ion-list class="accordion-list">
      <ion-list-header *ngFor="let item of contactList; let i=index" no lines no padding>
        <button ion item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active':, 'section': !}">
          <ion-icon item-left name="arrow-forward" *ngIf="!"></ion-icon>
          <ion-icon item-left name="arrow-down" *ngIf=""></ion-icon>
          {{item.firstName}} {{item.lastName}}

        <ion-list *ngIf="item.children &&" no lines>
            <ion-list-header *ngFor="let child of item.children; let j = index" no padding>
                <button ion item (click)="toggleItem(i, j)" detail-none class="child-item" *ngIf="child.children">
                    <ion-icon item-left name="arrow-forward" *ngIf="!"></ion-icon>
                    <ion-icon item-left name="arrow-down" *ngIf=""></ion-icon>
                    Call Now
                  <ion-item *ngIf="!child.children" detail-none class="child-item" text-wrap>
                    <button ion-button outline item-end (click)="buyItem(child)">{{child.phoneNumber}}</button>


Thanks in advance,