I want to hide the other 3 elements in li element after the one of the list was clicked (the clicked list remain unhide), as I try it hide all the li element.
payment.component.ts
paymentLists = [
{
name: 'IpayEasy',
},
{
name: 'Credit Card',
},
{
name: 'Internet Banking',
},
{
name: '7-Eleven',
},
];
selectedIndex: number;
select(index:number) {
this.selectedIndex = index;
}
payment.component.html
<ul *ngIf="selectedIndex == paymentList">
<li (click)="select(paymentList)"
*ngFor="let paymentList of paymentLists; let i=index">
<span>{{paymentList.name}}</span>
</li>
</ul>
Here what have I tried, demo
Before:
After:
You need to update your template as following
select functionUpdated html will be as follows
<ul>
<ng-container *ngFor="let paymentList of paymentLists; let i=index" >
<li (click)="select(i)" *ngIf="selectedIndex === undefined || selectedIndex == i" [ngClass]="{'tab__list--selected--mobile': selectedIndex == paymentList}">
<span>{{paymentList.name}}</span>
</li>
</ng-container>
</ul>
For reference, here is the working version
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments