viewchild

This plnker is probably the quickest way to see the issue I'm not sure if it's just some obvious gotcha when using ViewChild but it's very strange. The plunker is showing 3 inputs: The first input is a basic input and a button that can focus it. The second input is bound to the same value, and clicking edit will unlock the input. The third input is also bound to the same value, and clicking edit will unlock the input and give it focus. However, when adding the ViewChild to get a reference to the input, the NgModel binding on the input stops working. But any other bindings you attach (like

I'm trying to access a native element in order to focus on it when another element is clicked (much like the html attribute "for" - for cannot be used on elements of this type. However I get the error: TypeError: Cannot read property 'nativeElement' of undefined I try to console.log the nativeElement in ngAfterViewInit() so that it is loaded but it still throws the error. I also access nativeElement in the click event handler, so that I can focus the element when another element is clicked - is this possibly what is mucking it up, because it compiles before the view has loaded?. eg:

How should I configure the new Angular 8 view child? @ViewChild('searchText', {read: ElementRef, static: false}) public searchTextInput: ElementRef; vs @ViewChild('searchText', {read: ElementRef, static: true}) public searchTextInput: ElementRef; Which is better? When should I use static:true vs static:false ? In most cases you will want to use {static: false} . Setting it like this will ensure query matches that are dependent on binding resolution (like structural directives *ngIf, etc... ) will be found. Example of when to use static: false : @Component({ template: ` <div *ngIf="showMe"