Angular 2 ViewChild annotation returns undefined

Question

I am trying to learn Angular 2   I would like to access to a child component from a parent component using the  ViewChild Annotation   Here some lines of code   In BodyContent ts I have   import  ViewChild  Component  Injectable  from  angular2 core   import  FilterTiles  from     Components FilterTiles FilterTiles      Component   selector   ico-body-content    templateUrl   App Pages Filters BodyContent BodyContent html    directives   FilterTiles        export class BodyContent        ViewChild FilterTiles  ft FilterTiles       public onClickSidebar clickedElement  string            console log this ft           var startingFilter                 title   cognomi               values                     griffin                     simpson                         this ft tiles push startingFilter              while in FilterTiles ts    import  Component  from  angular2 core       Component        selector   ico-filter-tiles       templateUrl   App Pages Filters Components FilterTiles FilterTiles html         export class FilterTiles        public tiles             public constructor           Finally here the templates  as suggested in comments    BodyContent html     lt div  click   onClickSidebar    class  row  style  height 200px  background-color red   gt           lt ico-filter-tiles gt  lt  ico-filter-tiles gt       lt  div gt      FilterTiles html    lt h1 gt Tiles loaded lt  h1 gt   lt div  ngFor   tile of tiles  class  col-md-4  gt           stuff      lt  div gt      FilterTiles html template is correctly loaded into  ico-filter-tiles tag  indeed I am able to see the header    Note  the BodyContent class is injected inside another template  Body  using DynamicComponetLoader  dcl loadAsRoot BodyContent    ico-bodyContent   injector    import  ViewChild  Component  DynamicComponentLoader  Injector  from  angular2 core   import  Body                  from        Layout Dashboard Body Body   import  BodyContent           from    BodyContent BodyContent     Component       selector   filters        templateUrl   App Pages Filters Filters html        directives   Body  Sidebar  Navbar       export class Filters        constructor dcl  DynamicComponentLoader  injector  Injector           dcl loadAsRoot BodyContent    ico-bodyContent   injector          dcl loadAsRoot SidebarContent    ico-sidebarContent   injector              The problem is that when I try to write ft into the console log  I get undefined  and of course I get an exception when I try to push something inside the  tiles  array   no property tiles for  undefined     One more thing  FilterTiles component seems to be correctly loaded  since I m able to see the html template for it   Any suggestion  Thanks

User · Answer

It must work    But as G  nter Z  chbauer said there must be some other problem in template  I have created kinda Relevant-Plunkr-Answer  Pleas do check browser s console   boot ts   Component   selector   my-app    template    lt div gt   lt h1 gt  BodyContent  lt  h1 gt  lt  div gt          lt filter gt  lt  filter gt          lt button  click   onClickSidebar    gt Click Me lt  button gt        directives   FilterTiles        export class BodyContent        ViewChild FilterTiles  ft FilterTiles       public onClickSidebar             console log this ft            this ft tiles push  entered               filterTiles ts   Component        selector   filter       template    lt div gt   lt h4 gt Filter tiles  lt  h4 gt  lt  div gt          export class FilterTiles        public tiles             public constructor           It works like a charm  Please double check your tags and references   Thanks

User · Answer

My solution to this was to replace  ngIf  with  hidden   Downside was all the child components were present in the code DOM  But worked for my requirements

User · Answer

My solution to this was to move the ngIf from outside of the child component to inside of the child component on a div that wrapped the whole section of html   That way it was still getting hidden when it needed to be  but was able to load the component and I could reference it in the parent

User · Answer

The issue as previously mentioned is the ngIf which is causing the view to be undefined   The answer is to use ViewChildren instead of ViewChild  I had similar issue where I didn t want a grid to be shown until all the reference data had been loaded   html       lt section class  well   ngIf  LookupData    null  gt          lt h4 class  ra-well-title  gt Results lt  h4 gt          lt kendo-grid  searchGrid gt   lt  kendo-grid gt      lt  section gt    Component Code  import   Component  ViewChildren  OnInit  AfterViewInit  QueryList    from   angular core   import   GridComponent   from   progress kendo-angular-grid    export class SearchComponent implements OnInit  AfterViewInit         other code emitted for clarity       ViewChildren  searchGrid       public Grids  QueryList lt GridComponent gt       private SearchGrid  GridComponent      public ngAfterViewInit    void                this Grids changes subscribe  comps  QueryList  lt GridComponent gt     gt                        this SearchGrid   comps first                          Here we are using ViewChildren on which you can listen for changes  In this case any children with the reference  searchGrid  Hope this helps

User · Answer

In my case  I knew the child component would always be present  but wanted to alter the state prior to the child initializing to save work   I choose to test for the child until it appeared and make changes immediately  which saved me a change cycle on the child component   export class GroupResultsReportComponent implements OnInit         ViewChild ChildComponent  childComp  ChildComponent       ngOnInit    void           this WhenReady      gt  this childComp       gt    this childComp showBar   true                            Executes the work  once the test returns truthy         param test a function that will return truthy once the work function is able to execute          param work a function that will execute after the test function returns truthy             private WhenReady test  Function  work  Function            if  test    work            else setTimeout this WhenReady bind window  test  work              Alertnatively  you could add a max number of attempts or add a few ms delay to the setTimeout  setTimeout effectively throws the function to the bottom of the list of pending operations

User · Answer

I had a similar issue  where the ViewChild was inside of a switch clause that wasn t loading the viewChild element before it was being referenced  I solved it in a semi-hacky way but wrapping the ViewChild reference in a setTimeout that executed immediately  i e  0ms

User · Answer

For me using ngAfterViewInit instead of ngOnInit fixed the issue   export class AppComponent implements OnInit      ViewChild  video   video    ngOnInit            lt -- in here video is undefined       public ngAfterViewInit           console log this video nativeElement      lt -- you can access it here

User · Answer

My workaround was to use  style display   getControlsOnStyleDisplay    instead of  ngIf  controlsOn   The block is there but it is not displayed    Component   selector   app   template          lt controls  style display   getControlsOnStyleDisplay    gt  lt  controls gt       export class AppComponent      ViewChild ControlsComponent  controls ControlsComponent     controlsOn boolean   false     getControlsOnStyleDisplay         if this controlsOn          return  block         else         return  none

User · Answer

You could use a setter for  ViewChild     ViewChild FilterTiles  set ft tiles  FilterTiles        console log tiles        If you have an ngIf wrapper  the setter will be called with undefined  and then again with a reference once ngIf allows it to render   My issue was something else though  I had not included the module containing my  FilterTiles  in my app modules  The template didn t throw an error but the reference was always undefined

User · Answer

What solved my problem was to make sure static was set to false    ViewChild ClrForm   static  false   clrForm    With static turned off  the  ViewChild reference gets updated by Angular when the  ngIf directive changes

User · Answer

In my case  I had an input variable setter using the ViewChild  and the ViewChild was inside of an  ngIf directive  so the setter was trying to access it before the  ngIf rendered  it would work fine without the  ngIf  but would not work if it was always set to true with  ngIf  true     To solve  I used Rxjs to make sure any reference to the ViewChild waited until the view was initiated  First  create a Subject that completes when after view init   export class MyComponent implements AfterViewInit     private  viewInitWaiter    new Subject       ngAfterViewInit    void       this  viewInitWaiter  complete            Then  create a function that takes and executes a lambda after the subject completes   private  executeAfterViewInit func       gt  any   any     this  viewInitWaiter  subscribe null  null       gt        return func             Finally  make sure references to the ViewChild use this function    Input   set myInput val  any        this  executeAfterViewInit      gt            const viewChildProperty   this viewChild someProperty                          ViewChild  viewChildRefName    read  MyViewChildComponent   viewChild  MyViewChildComponent

User · Answer

If you re using Ionic you ll need to use the ionViewDidEnter   lifecycle hook  Ionic runs some additional stuff  mainly animation-related  which typically causes unexpected errors like this  hence the need for something that runs after ngOnInit  ngAfterContentInit  and so on

User · Answer

This worked for me   My component named  my-component   for example  was displayed using  ngIf  showMe  like so    lt my-component  showMe   showMe   ngIf  showMe  gt  lt  my-component gt    So  when the component is initialized the component is not yet displayed until  showMe  is true  Thus  my  ViewChild references were all undefined   This is where I used  ViewChildren and the QueryList that it returns  See angular article on QueryList and a  ViewChildren usage demo    You can use the QueryList that  ViewChildren returns and subscribe to any changes to the referenced items using rxjs as seen below   ViewChild does not have this ability   import   Component  ViewChildren  ElementRef  OnChanges  QueryList  Input   from   angular core   import  rxjs Rx     Component       selector   my-component       templateUrl     my-component component html       styleUrls      my-component component css      export class MyComponent implements OnChanges       ViewChildren  ref   ref  QueryList lt any gt      this reference is just pointing to a template reference variable in the component html file  i e   lt div  ref gt  lt  div gt       Input   showMe     this is passed into my component from the parent as a        ngOnChanges         ngOnChanges is a component LifeCycle Hook that should run the following code when there is a change to the components view  like when the child elements appear in the DOM for example      if showMe     this if statement checks to see if the component has appeared becuase ngOnChanges may fire for other reasons       this ref changes subscribe     subscribe to any changes to the ref which should change from undefined to an actual value once showMe is switched to true  which triggers  ngIf to show the component           result    gt                 console log result first   results   0  nativeElement                                                      console log result first nativeElement                                                           Do Stuff with referenced element here                              end subscribe          end if        end onChanges       end Class   Hope this helps somebody save some time and frustration

User · Answer

For Angular  Change  ngIf with display style  block  or  none  in HTML  selector   app   template          lt controls  style display   quot controlsOn    block     none  quot  gt  lt  controls gt       lt slideshow  mousemove   quot onMouseMove   quot  gt  lt  slideshow gt     directives   SlideshowComponent  ControlsComponent

User · Answer

The solution which worked for me was to add the directive in declarations in app module ts

User · Answer

This works for me  see the example below    x000D   x000D  import  Component  ViewChild  ElementRef  from  angular2 core   x000D   x000D   Component   x000D      selector   app   x000D      template     x000D           lt a  click   toggle  event   gt Toggle lt  a gt  x000D           lt div  ngIf  visible  gt  x000D             lt input  control name  value    ngModel    value  type  text    gt  x000D           lt  div gt  x000D         x000D     x000D   x000D  export class AppComponent   x000D   x000D      private elementRef  ElementRef  x000D       ViewChild  control   set controlElRef elementRef  ElementRef    x000D        this elementRef   elementRef  x000D        x000D   x000D      visible boolean  x000D   x000D      toggle  event  Event    x000D        this visible    this visible  x000D        if this visible    x000D          setTimeout      gt    this elementRef nativeElement focus        x000D          x000D        x000D   x000D    x000D   x000D   x000D

User · Answer

I had a similar issue and thought I d post in case someone else made the same mistake  First  one thing to consider is AfterViewInit  you need to wait for the view to be initialized before you can access your  ViewChild  However  my  ViewChild was still returning null  The problem was my  ngIf  The  ngIf directive was killing my controls component so I couldn t reference it   import  Component  ViewChild  OnInit  AfterViewInit  from  angular2 core   import  ControlsComponent  from    controls controls component   import  SlideshowComponent  from    slideshow slideshow component     Component       selector   app       template              lt controls  ngIf  controlsOn  gt  lt  controls gt           lt slideshow  mousemove   onMouseMove    gt  lt  slideshow gt             directives   SlideshowComponent  ControlsComponent      export class AppComponent        ViewChild ControlsComponent  controls ControlsComponent       controlsOn boolean   false       ngOnInit             console log  on init   this controls              this returns undefined            ngAfterViewInit             console log  on after view init   this controls              this returns null            onMouseMove event             this controls show                throws an error because controls is null           Hope that helps   EDIT As mentioned by  Ashg below  a solution is to use  ViewChildren instead of  ViewChild

User · Answer

Here s something that worked for me     ViewChild  mapSearch     read  ElementRef    mapInput  ElementRef   ngAfterViewInit       interval 1000  pipe          switchMap      gt  of this mapInput            filter response   gt  response instanceof ElementRef           take 1            subscribe  input  ElementRef    gt                do stuff                 So I basically set a check every second until the  ngIf becomes true and then I do my stuff related to the ElementRef

User · Answer

I fix it just adding SetTimeout after set visible the component  My HTML    lt input  txtBus  ngIf show  gt    My Component JS   Component     selector   app-topbar     templateUrl     topbar component html     styleUrls      topbar component scss      export class TopbarComponent implements OnInit      public show boolean false      ViewChild  txtBus   private inputBusRef  ElementRef     constructor             ngOnInit         ngOnDestroy    void            showInput         this show   true      setTimeout     gt         this inputBusRef nativeElement focus          500

User · Answer

For me the problem was I was referencing the ID on the element     ViewChild  survey-form   slides IonSlides    lt div id  survey-form  gt  lt  div gt    Instead of like this    ViewChild  surveyForm   slides IonSlides    lt div  surveyForm gt  lt  div gt

User · Answer

A kind of generic approach   You can create a method that will wait until ViewChild will be ready  function waitWhileViewChildIsReady parent  any  viewChildName  string  refreshRateSec  number   50  maxWaitTime  number   3000   Observable lt any gt      return interval refreshRateSec       pipe        takeWhile      gt   isDefined parent viewChildName           filter x   gt  x     undefined         takeUntil timer maxWaitTime          endWith parent viewChildName          flatMap v   gt            if   parent viewChildName   throw new Error  ViewChild    viewChildName   is never ready            return of  parent viewChildName                        function isDefined lt T gt  value  T   undefined   null   value is T     return  lt T gt value     undefined  amp  amp   lt T gt value     null      Usage        Now you can do it in any place of your code   waitWhileViewChildIsReady this   yourViewChildName   subscribe      gt            your logic here

[typescript] Angular 2 @ViewChild annotation returns undefined

Examples related to typescript

Examples related to angular