In Angular (Angular 4) ,Not able to access the ElementRef of another Component using @ViewChild

Question

I was trying to access the child component using @ViewChild in Parent Component(AppComponent.ts)

      import { Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
      import { HeaderComponent } from '../app/components/header/header.component';
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.less']
      })
      export class AppComponent implements AfterViewInit {
        title = 'app';
        @ViewChild('myHeader') myHeader: ElementRef;
        ngAfterViewInit() {
          this.myHeader.nativeElement.style.backgroundColor = 'red';
        }  
      }

Parent HTML(app.component.html)

<div>
    <app-header></app-header>
</div>

Now Child HeaderComponent is as below:

    import { Component, OnInit, ViewEncapsulation } from '@angular/core';

    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.less']
    })
    export class HeaderComponent implements OnInit {
      constructor() {
      }
      ngOnInit() {

      }

    }

Header HTML(header.component.html)(Child)

<div #myHeader> hello</div>

In ngAfterViewInit function this.myHeader.nativeElement is giving error.

AppComponent_Host.html:1 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at AppComponent.webpackJsonp.../../../../../src/app/app.component.ts.AppComponent.ngAfterViewInit (app.component.ts:12)
at callProviderLifecycles (core.es5.js:11189)
at callElementProvidersLifecycles (core.es5.js:11164)
at callLifecycleHooksChildrenFirst (core.es5.js:11148)
at checkAndUpdateView ....

Although when i tried to access any child defined in Parent HTML(app.component.html) its working like below:

<div #myHeader> <app-header></app-header></div>

But i want to access any ElementRef in header.component.html.I tired to have View Encapsulation also like below.

encapsulation: ViewEncapsulation.None,

in HeaderComponent but it also not working.Please let me know what else i am missing here.

Hope this answer may helpful https://stackoverflow.com/a/39909203/7491209 — Rajez, Aug 27 '17 at 18:01

score 3 · Answer 1 · answered Aug 27 '17 at 17:43

3

When you are using Component as @ViewChild you can directly set their instance instead of ElementRef

@ViewChild(HeaderComponent) myHeader: HeaderComponent;

In case you are using ElementRef you should specify the selector in the HTML as below,

<div #myHeader> hello</div>

answered Aug 27 '17 at 17:43

Aravind

40,391
16
91
110

Thanks Aarvind,I will try this. – Amit Aug 27 '17 at 19:08

score 1 · Accepted Answer · answered Aug 27 '17 at 18:03

You can't access element reference from child components template directly. You can access HeaderComponent in your AppComponent, using header components reference you can access all public properties of HeaderComponent. In HeaderComponent you can access any element from HeaderComponent's template & expose that as public property.

import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef} from '@angular/core'; 

@Component({ selector: 'app-header', templateUrl: './header.component.html', 

styleUrls: ['./header.component.less'] 
    }) 
export class HeaderComponent implements OnInit { 
        @ViewChild('myHeader')
     public myHeader: ElementRef; 
        constructor() { } 
        ngOnInit() { } 
        }

  /*---- AppComponent----*/
    import { Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
 import { HeaderComponent } from '../app/components/header/header.component';



@Component(
{ selector: 'app-root', 
templateUrl: './app.component.html', styleUrls: ['./app.component.less'] 
}) 
export class AppComponent implements AfterViewInit 
{ title = 'app'; 

@ViewChild(HeaderComponent) 
header: HeaderComponent;

 ngAfterViewInit() { 
this.header.myHeader.nativeElement.style.backgroundColor = 'red'; 
}

 }

this is not working in my case I am getting this.header as undefined — MasterMohsin, Oct 27 '21 at 08:15
Check to see if you have *ngIf or anything that's blocking loading the component. — Ruhul Mashbu, Jan 18 '22 at 14:13

In Angular (Angular 4) ,Not able to access the ElementRef of another Component using @ViewChild

2 Answers2