title: Reference ngFor value in component
body: <p>I have a nested <code>ngFor</code> statement. I need to retrieve the value of my first <code>ngFor</code> on button click.</p>
  
  <p>I have tried the following:</p>
  
  <ul>
  <li>use template reference variable</li>
  <li>use attribute binding</li>
  <li>use Input decorator</li>
  </ul>
  
  <p>This is my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-expansion-panel  *ngFor="let item of Datasource;"&gt;
    &lt;mat-expansion-panel-header  style="display:flex" class="mat-row"&gt;
      {{item.Header}}
  
    &lt;/mat-expansion-panel-header&gt;
  
    &lt;mat-selection-list [(ngModel)]="selectedOptions"&gt;
      &lt;mat-list-option  *ngFor="let line of item.match;  let i= index;" [value]="line"&gt;
        &lt;div class="container-name"&gt;
          &lt;div class="col-6"&gt;{{i}} - {line.user.Name }}  vs {{ line.user.Address }}&lt;/div&gt;
  
      &lt;/mat-list-option&gt;
    &lt;/mat-selection-list&gt;
  
    &lt;div style="text-align:center; padding: 20px"&gt;
      &lt;button mat-raised-button color="primary" (click)="submit()" type="submit"&gt;Add&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/mat-expansion-panel&gt;
  </code></pre>
  
  <p>Can this be achieved?</p>