title: Angular 7 Show and Hide a child in an *ngFor list
body: <p>I have a list of events, and want to show/hide details for each event when a user clicks on the event. Unsure how to proceed. I can get ALL events to show or hide, but not single ones. Looking for the simplest answer; the ones I've found so far of SO are often exceedingly complex, usually for more complex problems than mine. </p>
  
  <pre><code>  &lt;div *ngFor = "let event of events; index as i" class="event-list"&gt;
      &lt;section class = "event-item"&gt;
          &lt;h1 class = "event-name"&gt;{{ event.name }} &lt;/h1&gt;
      &lt;/section&gt;
  
      &lt;!-- WANT TO SHOW THIS WHEN ABOVE SECTION ELEMENT IS CLICKED --&gt;
      &lt;section id="event_details_{{i}}" class="event-details"&gt;
        &lt;p&gt;Details&lt;/p&gt;
      &lt;/section&gt;
      &lt;!-- END SHOW/HIDE SECTION --&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>I'm really just unsure how to proceed here. I've tried a bunch of probably Angular 1x tricks but they, unsuprisingly, didn't work. I don't want to rely on hacking  it with JQuery, I'd rather use an Angular solution. Thanks!</p>
  
  <p>This is along the lines of what I've tried but I can't figure out how to assign the toggleDetails[i] in the view like that. 
  </p>
  
  <pre><code>  &lt;div *ngFor = "let event of events; index as i" class="event-list"&gt;
  
       &lt;span [toggleDetails[i]] = false ]&gt;&lt;/span&gt; // if I could do this somehow it'd work but this obviously doesn't.
  
      &lt;section class = "event-item" (click)="toggleDetails[i]=!toggleDetails[i]"&gt;
        &lt;div class="event-summary"&gt;
          &lt;h1 class = "event-name"&gt;{{ event.name }} &lt;/h1&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;!-- WANT TO SHOW THIS WHEN ABOVE SECTION ELEMENT IS CLICKED --&gt;
      &lt;section id="event_details_{{i}}" class="event-details" *ngIf="toggleDetails[i]"&gt;
        &lt;p&gt;Details&lt;/p&gt;
        &lt;p&gt;Details&lt;/p&gt;
        &lt;p&gt;And deets&lt;/p&gt;
      &lt;/section&gt;
      &lt;!-- END SECTION --&gt;
  
    &lt;/div&gt;
  </code></pre>