Cannot read property 'native-element' of undefined Angular 8
<textarea matInput #message [ngModel]="Followup.Message"></textarea>
this piece of code probably needs some logic to get displayed (such as *ngIf
or *ngFor
on parent nodes, or some asynchronous code) which means that one changedetection cycle is required for it to get displayed.
According to Angular 8 docs
static - whether or not to resolve query results before change detection runs (i.e. return static results only). If this option is not provided, the compiler will fall back to its default behavior, which is to use query results to determine the timing of query resolution. If any query results are inside a nested view (e.g. *ngIf), the query will be resolved after change detection runs. Otherwise, it will be resolved before change detection runs.
so you should set static
to false
@ViewChild('message', { static: false })) messageElement: ElementRef;
here is a simple demo https://stackblitz.com/edit/angular-qgwhcv
in the demo above, input box gets displayed after 3 seconds. if you set static:false
and click edit after input gets displayed it successfully focuses the input. but if you change static:true
and click edit after input gets displayed, you will see error in the console.
I was facing the same problem because of creating an ElementRef type ChildView for a mat-option element like this
Template
<mat-select (selectionChange)="handleMetaSignalChange();">
<mat-option #metaSignalOption *ngFor="let metaSignal of metaSignals" [value]="metaSignal">
{{ metaSignal.name }}
</mat-option>
</mat-select>
Code
@ViewChild("metaSignalOption", { static: false }) selectedMetaSignal : ElementRef;
handleMetaSignalChange() {
console.log('Meta Signal Changed to ' + this.selectedMetaSignal.nativeElement.value);
}
And I fixed the issue using MatOption instead of ElementRef because ElementRef works only for native DOM elements as per official docs.
Updated Code
@ViewChild("metaSignalOption", { static: false }) selectedMetaSignal : MatOption;
handleMetaSignalChange() {
// Now selectedMetaSignal is a MatOption, not a native Element
console.log('Meta Signal Changed to ' + this.selectedMetaSignal.viewValue);
}