title: Angular - toggle only the selected element
body: <p>My app structure is the following:</p>
  
  <p><em>parent view</em></p>
  
  <pre><code>&lt;ng-template ngFor let-r [ngForOf]="richieste"&gt;
  &lt;button type="button" (click)="toggleValutazioni(r)"&gt;Toggle&lt;/button&gt;
  &lt;/ng-template&gt;
  &lt;div *ngIf="isToggledValutazioni(r)"&gt;
  &lt;app-valutazione-row [idRichiesta]="r.id"&gt;&lt;/app-valutazione-row&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em>child typescript</em></p>
  
  <pre><code>export class ValutazioneRowComponent implements OnInit {
    @Input() idRichiesta: number;
    ngOnInit() {
      hereIsWhereIgetMyData(idRichiesta);
    }
  }
  </code></pre>
  
  <p>So basically for each element of my <code>richieste</code> object I show a <code>Toggle</code> button, and when I toggle that button I show a child component. The problem is that when I toggle the button every child component shows the data of the last child component toggled. It's like every child is substituted with the last child I generated. Is there a way to make every child keep showing their infos?<br>Thanks. </p>
  
  <p><em>EDIT</em>
  Following is the code of my toggle function.</p>
  
  <pre><code>toggledValutazioni: Richiesta[] = []; 
  
  toggleValutazioni(r: Richiesta): void {
      const idx = this.toggledValutazioni.indexOf(r);
      if (idx &gt; -1){
        this.toggledValutazioni.splice(idx, 1);
      }
      else {
        this.toggledValutazioni.push(r);
      }
    }
  
    isToggledValutazioni(r: Richiesta): boolean {
      return this.toggledValutazioni.indexOf(r) &gt; -1;
    }
  </code></pre>
  
  <p>So I already take account of the element index. The problem is that when I toggle one element I add a row of details to my view under the toggled element. When I toggle another element, I add the related row of details, but this changes the previous row of details to the last one I added.</p>