0

This is my component from where i'm trying to access a variable in a child component. The parent is the app component and the child is called LoginComponent

import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { LoginComponent } from './login/login.component';

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

    @ViewChild(LoginComponent)
    private loginComponent: LoginComponent;
    title = 'app';

    hideLogin(){
        this.loginComponent.displayPopover = 'none';
    }

}

I took this code from this example in the angular.io site The problem is that when the hideLogin() function is executed i get this error: 

TypeError: this.loginComponent is undefined
Stack trace:
AppComponent.prototype.hideLogin@webpack-internal:///../../../../../src/app/app.component.ts:21:9
View_AppComponent_0/<@ng:///AppModule/AppComponent.ngfactory.js:10:23
viewDef/handleEvent@webpack-internal:///../../../core/esm5/core.js:13777:115
...

I truncated the error message because i don't think the whole stack trace is of any use. Anyhow, i think the error may be that the loginComponent object is not initialized. But it sound weird to me that the message says "is not defined" and in the example i took it from, it doesn't do anything to initialize the object and somehow it's seems like it has assigned the instance of the component's singleton since it's accessing its properties.

This problem is differen from that in the @viewChild return undefined issue since i'm not trying to access the object from the constructor. I'm trying to access it from a function that is executed via a click event. Here'e my app component view:

<div (click)="hideLogin()">
<app-top-bar></app-top-bar>
</div>

I even tried accessing it from the ngAfterViewInit() method like this:

ngAfterViewInit(){
    this.loginComponent.displayPopover = 'none';
}

But i get the same exact error

Santi
  • 1,682
  • 1
  • 13
  • 14
  • 2
    Possible duplicate of [@viewChild return undefined](https://stackoverflow.com/questions/40299808/viewchild-return-undefined) – Jota.Toledo Dec 17 '17 at 13:08
  • DV for lack of research, there are a lot of questions in SO related to this problem – Jota.Toledo Dec 17 '17 at 13:09
  • 2
    Can you post the contents of app.component.html? – JayChase Dec 17 '17 at 14:20
  • @Jota.Toledo in the duplicate, the problem is that the view child is accessed from the constructor. That's not the case here. – JB Nizet Dec 17 '17 at 14:30
  • Works fine here: http://plnkr.co/edit/7eFGRcTTECFURSKtDjlu?p=preview. But of course, I had to guess a lot of things. If you want help, post a complete, minimal example reproducing the problem. – JB Nizet Dec 17 '17 at 14:39
  • indeed, you are right @JBNizet withouth the template is hard to tell where OPs code is failing – Jota.Toledo Dec 17 '17 at 14:44
  • thanks fro the comments, I edited it adding the html content of the component – Santi Dec 17 '17 at 16:04
  • Well, you're trying to access a LoginComponent that is supposed to be in the view of your component. But there is no such component in the view. All there is is app-top-bar. – JB Nizet Dec 17 '17 at 16:08
  • Yes. I just realized that when i posted it. the fact is loginComponent is a child of the top-bar component you can see in the html and i assumed that i could access to child of any level this way. I guess i'll have to use services or same other technique, thanks for the support. – Santi Dec 17 '17 at 16:39

0 Answers0