Ionic List Accordion

ionic-v1
1

Hey all,

I am using the following plugin:

My html is set up and now reads:

 <ion-content class="alpha-list-page">
      <ion-alpha-scroll
        [listData]="contactList"
        key="name"
        [itemTemplate]="alphaScrollItemTemplateRef"
        [currentPageClass]="currentPageClass"
        [triggerChange]="triggerAlphaScrollChange">

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

      </ion-alpha-scroll>
    </ion-content>

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

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': item.open, 'section': !item.open}">
          <ion-icon item-left name="arrow-forward" *ngIf="!item.open"></ion-icon>
          <ion-icon item-left name="arrow-down" *ngIf="item.open"></ion-icon>
          {{item.firstName}} {{item.lastName}}
        </button>

        <ion-list *ngIf="item.children && item.open" 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="!item.open"></ion-icon>
                    <ion-icon item-left name="arrow-down" *ngIf="item.open"></ion-icon>
                    Call Now
                  </button>
                  <ion-item *ngIf="!child.children" detail-none class="child-item" text-wrap>
                    {{child.phoneNumber}}
                    <button ion-button outline item-end (click)="buyItem(child)">{{child.phoneNumber}}</button>
                  </ion-item>



            </ion-list-header>
        </ion-list>
      </ion-list-header>
    </ion-list>

Thanks in advance,
Astrix