CODEWITHSUNDEEP
ionic3angular5angular6
Sireini
Sireini

Reputation: 4262

Only show specific ngIf item

I have created an toggle-show-more-items component which is a button which shows more values. But if I have multiple toggle-show-more-items components it opens them all. How can I target a specific item I will show you below how I did it right now.

<div *ngFor="let bucketName of bucketNames" [hidden]="!getBucketsWithValues(bucketName.criterium).length">
  <ng-container *ngIf="bucketName.toon_maximaal && open">
    <div *ngFor="let bucket of getBucketsWithValues(bucketName.criterium) | orderBy:'key'; let ndx = index">
         <osi-checkbox *ngIf="ndx >= bucketName.toon_maximaal" 
            [model]="filter[bucketName.criterium][bucket.key].checked" 
            (change)="onFilterChange(filter[bucketName.criterium][bucket.key], $event.checked)">

            <osi-li-body class="osi-black-87">{{ bucket.key }}&nbsp;({{ bucket.doc_count }})</osi-li-body>

         </osi-checkbox>
    </div>
  </ng-container>

  <div *ngIf="bucketName.toon_maximaal && getBucketsWithValues(bucketName.criterium).length > bucketName.toon_maximaal">
    <toggle-show-more-item [openTitle]="'OWC.SHOW_MORE' | translate | uppercase" [closeTitle]="'OWC.SHOW_LESS' | translate | uppercase" 
         [padding]="false" (onToggleClick)="showMore($event)"></toggle-show-more-item>
  </div>
</div>

And this is the showMore method:

showMore(open) {
   this.open = open;
}

Upvotes: 0

Views: 62

Answers (1)

saperlipopette
saperlipopette

Reputation: 1693

You can use indexes

Add a open property to every item of the bucketNames array, so that you will be able to set if an item is in "showMore mode" or not.

Instead of

*ngFor="let bucketName of bucketNames"

Use 

*ngFor="let bucketName of bucketNames; let i = index"

Then change your showMore function : 

(onToggleClick)="showMore($event, i)"

And adapt it in your ts : 

showMore(open, index) {
   this.bucketNames[index].open = open; // Access only the element at given index
}

You will also need to change your component *ngIf : 

<ng-container *ngIf="bucketName.toon_maximaal && bucketName.open">

As an alternative to the component method you can set open in the template as well. 

(onToggleClick)="bucketNames[i].open = $event"

Upvotes: 1

Related Questions