Hey all,
I am using the following plugin:
https://github.com/rossmartin/ionic2-alpha-scroll
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