title: Angular 9 - Local Reference, #, View child, @ViewChild
body: <p>I have recently upgraded my project to angular 9.</p>
  
  <p><strong>Issue:-</strong></p>
  
  <p>I am facing issue with Local Reference('#') in template.</p>
  
  <p>I get the value as 'undefined'. </p>
  
  <p><strong>Objective:</strong> 
  I am trying to close mat-select on scroll.</p>
  
  <p>Code:</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;mat-select (selectionChange)="showDataForLocation($event)"
              [(value)]="dataService.startinglocation"
              (openedChange)="selectPanelOpened($event)" 
              #mySelect&gt;
  
        &lt;mat-option  aria-selected="true" [value]="location.ExLocationName" 
                    *ngFor="let location of startingPointData?.ExLocation"&gt; 
                      {{location.ExLocationName}}
        &lt;/mat-option&gt;
  &lt;/mat-select&gt;
  </code></pre>
  
  <p><strong>TS code</strong></p>
  
  <pre><code>@ViewChild('mySelect', { static: true }) mySelect;
  
  @HostListener('window:scroll', [])
    onWindowScroll() {
  
      this.mySelect.close();
    }
  </code></pre>
  
  <p>The above worked perfectly on Angular 5, however now it throws error on 9.</p>
  
  <pre><code>
  Uncaught TypeError: Cannot read property 'close' of undefined
      at DetailComponent.onWindowScroll (detail.component.ts:1378)
      at DetailComponent_scroll_HostBindingHandler (detail.component.ts:77)
      at executeListenerWithErrorHandling (core.js:21593)
      at wrapListenerIn_markDirtyAndPreventDefault (core.js:21635)
      at platform-browser.js:934
      at ZoneDelegate.invokeTask (zone-evergreen.js:400)
      at Object.onInvokeTask (core.js:40744)
      at ZoneDelegate.invokeTask (zone-evergreen.js:399)
      at Zone.runTask (zone-evergreen.js:168)
      at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:481)
  
  </code></pre>