title: Unable to focus on a Mat card using viewchildren Angular
body: <p>I am trying to focus on a specific card from a list of mat cards </p>
  
  <p>But I keep getting error </p>
  
  <blockquote>
    <p>Cannot read property 'focus' of undefined</p>
  </blockquote>
  
  <p><a href="https://stackblitz.com/edit/angular-gu5kpe?file=app/card-overview-example.html" rel="nofollow noreferrer">Stackblitz code</a></p>
  
  <p>Should add a gold outline on click of button</p>
  
  <pre><code>import { Component, OnInit, QueryList, ElementRef, ViewChildren } from '@angular/core';
  
  /**
   * @title Basic cards
   */
  @Component({
    selector: 'card-overview-example',
    templateUrl: 'card-overview-example.html',
    styleUrls: ['card-overview-example.css'],
  })
  export class CardOverviewExample implements OnInit {
  
    comments: number[];
    @ViewChildren("commentCard") commentCardList: QueryList&lt;ElementRef&gt;;
  
    ngOnInit() {
      this.comments = [1, 2, 3, 4, 5, 6, 7, 8];
    }
  
    focus() {
      const elementRef = this.commentCardList.find((item, index) =&gt; index === 4);
      elementRef.nativeElement.focus();
  //this.commentCardList[4].nativeElement.focus();
  
    }
  
  }
  </code></pre>