CODEWITHSUNDEEP
angular
Tomas
Tomas

Reputation: 3436

Angular 2/4 list show and hide element details

Hellow Stack community,
I have an array of objects, which may have some additional details which I don't wont to expose in the beginning to user. I'm displaying all available objects in array via ngFor and I wish to add a toggle button to show/hide details per each array element. Currently, I'm using following solution: per each event in array I store additional boolean value in separate array that drives details visibility:
Template:

<ul>
  <li *ngFor="let schedule of schedulesList; let idx = index">
    <div>
      {{schedule.beginDate}} to {{schedule.endDate}}
      <span>
        <i class="material-icons md-24" >{{configureMdIcon}}</i>
        <i class="material-icons md-24" (click)="eventListVisibility($event, idx)">{{seeListMdIcon}}</i>
        {{scheduleEventsListVisible}}
      </span>
        <div *ngIf="eventsVisible[idx]">Events:
            <ul>
              <li *ngFor="let event of schedule.additionalEvents">
                {{event.details}}
              </li>
            </ul>
        </div>
    </div>
  </li>
</ul>

controler:

  eventListVisibility(e: Event, idx: number){
    if(typeof this.eventsVisible != undefined){
      this.eventsVisible[idx] = !this.eventsVisible[idx];
    }

This code works but my question is:
Is there a more clever way to do that? I got a feeling that using additional array to drive visibility is a waste, and as far as I know Angular, there will be some hidden feature to solve this issue.
Thank you for any kind of help

Upvotes: 0

Views: 379

Answers (1)

Andrew Howard
Andrew Howard

Reputation: 3092

The way you've done it is the best way to approach it. There are no performance penalties for doing it that way since you're using ng if which doesn't even comment the code out from the markup so you're fine :)

Upvotes: 1

Related Questions