viewChild not working - cannot read property nativeElement of undefined

Question

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   ngAfterViewInit         console log this keywordsInput nativeElement      throws an error    focusKeywordsInput        this keywordsInput nativeElement focus        full Code   relevant part of the html template being used    lt div id  keywords-button  class  form-group   click   focusKeywordsInput    gt       lt input formControlName  keywords  id  keywords-input  placeholder  KEYWORDS  optional    gt       lt div class  form-control-icon  id  keywords-icon  gt  lt  div gt   lt  div gt    component ts   import   Component  OnInit  AfterViewInit  ViewChild  ElementRef   from   angular core   import    REACTIVE FORM DIRECTIVES             FormGroup             FormBuilder             Validators            ControlValueAccessor           from   angular forms   import   NumberPickerComponent   from    number-picker component   import   DistanceUnitsComponent   from    distance-units component   import   MapDemoComponent   from     shared map-demo component   import   AreaComponent   from    area-picker component   import   GoComponent   from    go component   import   HighlightDirective   from     highlight directive     Component      selector   find-form      templateUrl   app find-page find-form component html      styleUrls    app find-page find-form component css       directives   REACTIVE FORM DIRECTIVES                   NumberPickerComponent                   DistanceUnitsComponent                   MapDemoComponent                   AreaComponent                   GoComponent     export class FindFormComponent implements OnInit  AfterViewInit      findForm  FormGroup     submitted  boolean     keep track on whether form is submitted    events  any            use later to display form changes     ViewChild  keywords-input   keywordsInput    comment    constructor private formBuilder  FormBuilder  el  ElementRef         ngOnInit           this findForm   this formBuilder group            firstname         Validators required  Validators minLength 5                lastname       Validators required            keywords               area       Validators required            address  this formBuilder group               street                  zip                  city                                  this findForm valueChanges subscribe data   gt  console log  form changes   data               ngAfterViewInit         console log this keywordsInput nativeElement      throws an error         focusKeywordsInput          this keywordsInput nativeElement focus             save isValid  boolean          this submitted   true           check if model is valid          if valid  call API to save customer       console log isValid            full html template  probably irrelevant     lt form class  text-uppercase   formGroup   findForm   ngSubmit   save findForm value  findForm valid   gt       lt div class  row is-heading  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group  gt               lt h2 class  search-filter-heading heading m-x-auto  gt find vegan lt  h2 gt           lt  div gt       lt  div gt       lt div class  row has-error-text  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group  style  height 64px   gt               lt div style  position  relative  display  inline-block  width  100    gt                   lt multiselect  multiselect gt  lt  multiselect gt               lt  div gt           lt  div gt       lt  div gt       lt div class  row error-text    style display   multiselect selectedCategories length  lt  1  amp  amp  submitted    block     none   gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 form-group input-group btn-group  gt               lt small gt Please select at least 1 category  lt  small gt           lt  div gt       lt  div gt       lt div class  row is-heading  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group  gt               lt h2 class  search-filter-heading heading m-x-auto  gt within lt  h2 gt           lt  div gt       lt  div gt       lt div class  row  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group  style  height 64px   gt               lt div style  position  relative  display  inline-block   gt                   lt number-picker  numberPicker gt  lt  number-picker gt               lt  div gt               lt distance-units gt  lt  distance-units gt           lt  div gt       lt  div gt       lt div class  row is-heading  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group  gt               lt h2 class  search-filter-heading heading m-x-auto  gt of lt  h2 gt           lt  div gt       lt  div gt       lt div class  row has-error-text  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group  style  height 64px   gt               lt div style  position  relative  display  inline-block  width  100    gt                   lt my-area gt  lt  my-area gt               lt  div gt           lt  div gt       lt  div gt       lt div class  row error-text    style display   multiselect selectedCategories length  lt  1  amp  amp  submitted    block     none   gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 form-group input-group btn-group  gt               lt small  hidden   findForm controls firstname valid     findForm controls firstname pristine  amp  amp   submitted   gt Please enter an area  lt  small gt           lt  div gt       lt  div gt       lt div class  row is-heading  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group  gt               lt h2 class  search-filter-heading heading m-x-auto  gt keywords lt  h2 gt           lt  div gt       lt  div gt       lt div class  row form-group  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group  style  height 64px   gt               lt div style  position  relative  display  inline-block  width  100    gt                   lt div id  keywords-button  class  form-group   click   focusKeywordsInput    gt                       lt input formControlName  keywords  id  keywords-input  placeholder  KEYWORDS  optional    gt                       lt div class  form-control-icon  id  keywords-icon  gt  lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt       lt div class  row  gt           lt div class  col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-4 offset-lg-4 input-group btn-group  style  height 64px   gt               lt div style  position  relative  display  inline-block  width  100    gt                   lt go gt  lt  go gt               lt  div gt           lt  div gt       lt  div gt   lt  form gt

User · Answer

The accepted answer is correct in all means and I stumbled upon this thread after I couldn't get the Google Map render in one of my app components.

Now, if you are on a recent angular version i.e. 7+ of angular then you will have to deal with the following ViewChild declaration i.e.

@ViewChild(selector: string | Function | Type<any>, opts: {
read?: any;
static: boolean;
})

Now, the interesting part is the static value, which by definition says

static - True to resolve query results before change detection runs

Now for rendering a map, I used the following ,

@ViewChild('map', { static: true }) mapElement: any;
  map: google.maps.Map;

User · Answer

Sometimes  this error occurs when you re trying to target an element that is wrapped in a condition  for example   lt div  ngIf  quot canShow quot  gt   lt p  target gt Targeted Element lt  p gt  lt  div gt  In this code  if canShow is false on render  Angular won t be able to get that element as it won t be rendered  hence the error that comes up  One of the solutions is to use a display  hidden on the element instead of the  ngIf so the element gets rendered but is hidden until your condition is fulfilled  Read More over at Github

User · Answer

ViewChild  keywords-input   keywordsInput  doesn t match id  keywords-input   id  keywords-input    should be instead a template variable    keywordsInput   Note that camel case should be used  since - is not allowed in template reference names    ViewChild   supports names of template variables as string    ViewChild  keywordsInput   keywordsInput    or component or directive types    ViewChild MyKeywordsInputComponent  keywordsInput    See also https   stackoverflow com a 35209681 217408  Hint  keywordsInput is not set before ngAfterViewInit   is called

User · Answer

Initializing the Canvas like below works for TypeScript Angular solutions   const canvas    lt HTMLCanvasElement gt  document getElementById  htmlElemId      const context   canvas getContext  2d

User · Answer

What happens is when these elements are called before the DOM is loaded these kind of errors come up  Always use    window onload   function         this keywordsInput nativeElement focus

User · Answer

You ll also get this error if your target element is inside a hidden element   If this is your HTML   lt div  ngIf  quot false quot  gt       lt span  sp gt Hello World lt  span gt   lt  div gt   Your  ViewChild  sp   sp will be undefined  Solution In such a case  then don t use  ngIf  Instead use a class to show hide your element being hidden   lt div  class show   quot shouldShow quot  gt     lt  div gt

User · Answer

This error occurs when you re trying to target an element that is wrapped in a condition  So  here if I use ngIf in place of  hidden   it will give me TypeError  Cannot read property  nativeElement  of undefined So use  hidden   class show or class hide in place of  ngIf   lt button  click   quot displayMap   quot  class  quot btn btn-primary quot  gt Display Map lt  button gt       lt div  hidden   quot  display quot  gt         lt div  mapContainer id  quot map quot  gt Content to render when condition is true  lt  div gt      lt  div gt

User · Answer

it just simple  import this directory  import  Component  Directive  Input  ViewChild  from   angular core

[angular] @viewChild not working - cannot read property nativeElement of undefined

Examples related to angular

Examples related to viewchild