title: Angular 4 : Cannot read property 'nativeElement' of undefined
body: <p>I am trying to click an accordion manually when a component gets loaded .But in my case I got the console error as I mentioned in the title and the accordion also not get clicked .</p>
  
  <p>accordion :</p>
  
  <pre><code>&lt;div class="accordion col-sm-12" id="accordion1" *ngFor='let data of dropdownData; let i=index'&gt;
      &lt;div class="accordion-group"&gt;
  
          &lt;div class="accordion-heading"&gt;
              &lt;a class="accordion-toggle h6" data-toggle="collapse"    data-parent="#accordion1" href="#collapseTwo + i" #accordion&gt;
                  {{data?.CAMD_ENTITY_DESC}}
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div *ngFor='let group of data.group; let j=index' id="collapseTwo + i" class="accordion-body collapse"
           style="margin-left:10px"&gt;
              &lt;div class="accordion-inner"&gt;
                  &lt;div class="accordion" id="accordion2"&gt;
                      &lt;div class="accordion-group"&gt;
  
                          &lt;div class="accordion-heading"&gt;
                              &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" [href]="'#collapseInnerTwo' + j"&gt;
                                  {{group?.CAMD_PRGRP_DESC}}
                              &lt;/a&gt;
                          &lt;/div&gt;
  
                          &lt;div [id]="'collapseInnerTwo' + j" class="accordion-body collapse" style="margin-left:10px;margin-top:3px"&gt;
  
                              &lt;div class="accordion-inner" *ngFor='let subgroup of group?.subgroup; let i=index'&gt;
                                  {{subgroup?.CAMD_PRSGRP_DESC}}
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here I have given <strong>#accordion</strong> to get the elementRef.</p>
  
  <p>component</p>
  
  <pre><code>export class TwoComponent implements OnInit, AfterViewInit {
    dropdownData: any;
    id: number = 0;
  
    @ViewChildren('accordion') a: QueryList&lt;ElementRef&gt;;
  
    constructor(private route: ActivatedRoute, private CartdataService: CartdataServiceService) { }
  
    ngOnInit() {
      this.CartdataService.get_New_Products().subscribe(
        data =&gt; {
          this.dropdownData = data;
        });
    }
  
    ngAfterViewInit() {
      this.a.changes.subscribe(() =&gt; {
        let elementRef = this.a.toArray()[this.id];
        $(elementRef.nativeElement).trigger("click");
      });
    }
  
  }
  </code></pre>
  
  <p>Can anyone help me to fix this issue .</p>