title: How to get nativeElement from @ViewChild in Ionic 4/Angular7?
body: <p>I am using Ionic 4's ion-search like so:</p>
  
  <pre><code>     &lt;ion-searchbar
              #searchbarElem
              (ionInput)="getItems($event)"
              (tap)="handleTap($event)"
              [(ngModel)]="keyword"
              (ngModelChange)="updateModel()"
              [cancelButtonText]="options.cancelButtonText == null ? defaultOpts.cancelButtonText : options.cancelButtonText"
              [showCancelButton]="options.showCancelButton == null ? defaultOpts.showCancelButton : options.showCancelButton"
              [debounce]="options.debounce == null ? defaultOpts.debounce : options.debounce"
              [placeholder]="options.placeholder == null ? defaultOpts.placeholder : options.placeholder"
              [autocomplete]="options.autocomplete == null ? defaultOpts.autocomplete : options.autocomplete"
              [autocorrect]="options.autocorrect == null ? defaultOpts.autocorrect : options.autocorrect"
              [spellcheck]="options.spellcheck == null ? defaultOpts.spellcheck : options.spellcheck"
              [type]="options.type == null ? defaultOpts.type : options.type"
              [disabled]="disabled"
              [ngClass]="{'hidden': useIonInput}"
              (ionClear)="clearValue(true)"
              (ionFocus)="onFocus()"
              (ionBlur)="onBlur()"
      &gt;
      &lt;/ion-searchbar&gt;
  </code></pre>
  
  <p>On click I run the following from within the component:</p>
  
  <pre><code>@HostListener('document:click', ['$event'])
  private documentClickHandler(event) {
      if ((this.searchbarElem
              &amp;&amp; !this.searchbarElem._elementRef.nativeElement.contains(event.target))
          ||
          (!this.inputElem &amp;&amp; this.inputElem._elementRef.nativeElement.contains(event.target))
      ) {
          this.hideItemList();
      }
  }
  </code></pre>
  
  <p>However, I am getting the following error:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'nativeElement' of undefined
  </code></pre>
  
  <p>I have tried setting timeouts and declaring searchbarElem as <code>ElementRef</code> with no luck.</p>
  
  <p>I know this worked in Angular 2/Ionic 2 but now it is not. Did something change or is the shadow dom affecting thing? Any help would be appreciated, thanks.</p>