title: getting value of undefined when using @ViewChild to get <gridster-item> element?
body: <p>my issue it is:</p>
  <p>Angular 11.0.0
  angular-gridster2 11.1.5</p>
  <p>Cannot access gridster-item element with ViewChild decorator</p>
  <p>getting value of undefined when using @ViewChild to get  element?
  html</p>
  <pre><code>&lt;mat-dialog-content #dialogContent2  style=&quot;height: 38vw !important; max-height: 38vw !important;&quot;&gt;
  
    &lt;mat-tab-group id=&quot;tabGroup&quot; #tabGroup2 (selectedTabChange)=&quot;changedOptions(tabGroup)&quot; animationDuration=&quot;0ms&quot; mat-align-tabs=&quot;center&quot;&gt;
      &lt;mat-tab #tap2 *ngFor=&quot;let dashboard of dashboards.tabs; index as tapIndex&quot; [label]=&quot;dashboard.name&quot;&gt;
  
        &lt;div #div2 dir=&quot;ltr&quot; class=&quot;certificateBox&quot; [style.width.mm]=&quot;dashboards.view.width&quot; [style.height.mm]=&quot;dashboards.view.height&quot; &gt;   
          &lt;gridster #gridster2 [options]=&quot;options&quot;&gt;
            &lt;gridster-item #gridsterItem2 id=&quot;gridsterItem&quot; style=&quot;background: none;&quot; [item]=&quot;item&quot; *ngFor=&quot;let item of dashboard.details.contents; index as i&quot;&gt;
            &lt;/gridster-item&gt;
          &lt;/gridster&gt;
        &lt;/div&gt;
      &lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  &lt;/mat-dialog-content&gt;
  </code></pre>
  <p>typescript</p>
  <pre><code>@ViewChild('dialogContent2')  dialogContent2;
  @ViewChild('tabGroup2')  tabGroup2;
  @ViewChild('tap2')  tap2;
  @ViewChild('div2')  div2;
  @ViewChild('gridster2')  gridster2;
  @ViewChild('gridsterItem2')  gridsterItem2;
  
  ngAfterViewInit(){
  
    console.log(this.dialogContent2)) /* works finke */
    console.log(this.tabGroup2)) /* works finke */
    console.log(this.tap2)) /* works finke */
    console.log(this.div2)) /* works finke */
    console.log(this.gridster2) /* works finke */
    console.log(this.gridsterItem2) /* undefined */
  }
  </code></pre>