Hide element using ngFor and ngIf

Question

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:

IpayEasy

Credit Card

Internet Banking

7-Eleven (clicked li)

After:

7-Eleven (li element remain unhide)

If index (and selectedIndex) is a number and paymentList is an array, how can selectedIndex ever be equal to an array? — cloned, May 14 '19 at 06:21
Check this:https://stackblitz.com/edit/angular-display-list-pysyaj — Prashant Pimpale, May 14 '19 at 06:31
You can accept one answer (if it helps you) by click on big gray check button on its left side. If you wish you can add +10 points to any author of any good answer by click upper gray triangle — Kamil Kiełczewski, May 14 '19 at 07:06

Nikhil Aggarwal · Accepted Answer · 2019-05-14T06:31:57.830

You need to update your template as following

Move ngFor to ng-container element
Update ngIf condition to be true only if there is no selected index or the matching selected index
Pass index in select function

Updated 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

score 0 · Answer 2 · answered May 14 '19 at 06:26

try

  <ul *ngIf="selectedIndex == paymentList">
    <ng-container *ngFor="let paymentList of paymentLists; let i=index">
      <li (click)="select(paymentList)" *ngIf="!selectedIndex || selectedIndex=i">
        <span>{{paymentList.name}}</span>
      </li>
    </ng-container>
  </ul>

score 0 · Answer 3 · answered May 14 '19 at 06:32

you can use this code instead of yours :

your ts:

  select(index) {
     this.paymentLists = [index];
  }

your HTML:

 <ul *ngIf="selectedIndex == paymentList">
    <li (click)="select(paymentList)" 
    *ngFor="let paymentList of paymentLists; let i=index">
      <span>{{paymentList.name}}</span>
   </li>
 </ul>

score 0 · Answer 4 · answered May 14 '19 at 07:11

Just for the record, Since my previous answer wasn't very clear. Here is a thorough explanation to the solution for the aforementioned problem.

paymentLists = [
    {
      name: 'IpayEasy',
    },
    {
      name: 'Credit Card',
    },
    {
      name: 'Internet Banking',
    },
    {
      name: '7-Eleven',
    },
  ];

  selectedIndex: number;

  select(index:number) {
    this.selectedIndex = this.paymentLists.findIndex(x => x.name==paymentListNameObject.name);
    this.paymentListSelected = true;
  }

in the above mentioned code, the select function recieves an object instead of the index number. which can be corrected as above. Also i added a variable paymentListSelected. this variable tracks if a particular payment method has been selected.

In the HTML, you could get rid of *ngIf="selectedIndex == paymentList" and use the following:

    <ul>
        <li *ngFor="let paymentList of paymentLists; let i=index" (click)="select(paymentList)" 
          [ngClass]="{'tab__list--selected--mobile': ((i == selectedIndex)&&paymentListSelected),'hide-tab__list--unselected--mobile': paymentListSelected}">
          <span>{{paymentList.name}}</span>
        </li>
   </ul>

Here i add 2 classes tab__list--selected--mobile which is applied to the selected payment method based on the index number which was selected by the user. And to hide the other options, i added hide-tab__list--unselected--mobile to all other options.

Finally here is a working link just in case the explanation wasn't clear enough.

https://stackblitz.com/edit/angular-display-list-d19ffv

This answer i guess qualifies for not getting DELETED!!!!!

Hide element using ngFor and ngIf

4 Answers4