title: Get Reference of multiple Elements
body: <p>I have this a bunch of input fields which are created dynamically</p>
  
  <pre><code>&lt;tr *ngFor="let row of rows; let rowIdx = index"&gt;
      &lt;td *ngFor="let col of columns; let colIdx = index"&gt;
          &lt;mat-form-field class="example-full-width"&gt;
              &lt;input #inputs #test type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"
                      (keyup.enter)="shiftFocusEnter(rowIdx, colIdx)"&gt;
              &lt;mat-autocomplete #auto="matAutocomplete"&gt;
                  &lt;mat-option *ngFor="let option of filteredOptions | async" [value]="option"&gt;
                      {{ option }}
                  &lt;/mat-option&gt;
              &lt;/mat-autocomplete&gt;
          &lt;/mat-form-field&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I want to get access to these input fields in my classes. 
  I'm currently using </p>
  
  <pre><code>@ViewChild('test', { read: MatAutocompleteTrigger }) test: MatAutocompleteTrigger;
  </code></pre>
  
  <p>to access it.
  However this will only give me the first input field of all the ones which have been created through the loop.</p>
  
  <p>Using ViewChildren instead only results in Errors while calling intern functions of the "test" object</p>
  
  <p>e.g.</p>
  
  <p><strong>this.test.closePanel()</strong> => <em>"this.test.closePanel is not a function"</em></p>
  
  <p><strong>Edit1:</strong></p>
  
  <p>To provide more info, I have a dynamically created table (rows and columns).
  My table is currently filled with multiple input fields. I can tab through these input fields by pressing the enter key. </p>
  
  <p>However if i tab by pressing the enter key, the suggestion panel of the angular autocomplete material will not close. Thats why I try to call the closePanel() method manually however by using this approach described above, only the first cell is "recognized" hence the closePanel() method only works on the first cell - input element</p>
  
  <p><strong>EDIT 2:</strong> </p>
  
  <p>I managed to solve this a couple of weeks ago but forgot to update in case someone has this problem as well.</p>
  
  <p>This is how my method looks like right now:</p>
  
  <pre><code>    shiftFocusEnter(rowIdx: number, colIdx: number) {
      console.log("Enter", rowIdx, colIdx);  
      if(colIdx == 4 &amp;&amp; rowIdx == 5) {
      console.log("Reached end of row");
      }
      else {
        colIdx = colIdx + this.columns.findIndex(c =&gt; c.editable);
        this.focusInput(rowIdx, colIdx);
        this.autocompletes.toArray().forEach(el =&gt; {
          el.closePanel();
        })
      }
    }
  
    focusInput(rowIdx: number, colIdx: number) {
      console.log("FOCUS ON", rowIdx, colIdx);
        let inputEls = this.inputs.toArray();
        let flatIdx = (rowIdx * this.columns.length) + colIdx;
        inputEls[flatIdx].nativeElement.focus();
    }
  </code></pre>