How to get nativeElement from @ViewChild in Ionic 4/Angular7?

You should use ViewChild with the read: ElementRef metadata property:

@ViewChild("searchbarElem", { read: ElementRef }) private searchbarElem: ElementRef;

and access the HTMLElement with this.searchbarElem.nativeElement:

@HostListener('document:click', ['$event'])
private documentClickHandler(event) {
    console.log(this.searchbarElem.nativeElement);
}

See this stackblitz for a demo (see the code in the Home page).

For those working with Angular 8 and Ionic 4 one can set the flag static: false without attacking the native elements.

@ViewChild('searchInput', {static: false}) searchInput: IonSearchbar;

See this Stackoverflow thread:

Related