3

THE SITUATION:

From the app component I need to call a method in another component.

I read that @ViewChild is the way to do it.

But is not working in my case. I am getting the following error:

Cannot read property ... of undefined

THE CODE:

This for example is a simple test method inside the HomePage component:

testChild()
{
    alert('child working');
}

In the app.component I declare HomePage as the child component: 

@ViewChild(HomePage) homePage: HomePage;

and then call the method from the constructor:

this.homePage.testChild();

It should work right?

Instead I am getting this error:

enter image description here

The problem is not that the view is not loaded yet.

I have tried also to call the child from a click event and got the same error.

THE QUESTION:

Why is the child component is undefined?

Do you know what am I doing wrong?

Thanks!

FrancescoMussi
  • 20,760
  • 39
  • 126
  • 178

1 Answers1

3

and then call the method from the constructor:

You need to call it in the ngAfterViewInit lifecycle hook. Angular will call the method.

import { AfterViewInit } from '@angular/core';

@Component()
export class MyComponent implements AfterViewInit {

  @ViewChild(HomePage) homePage: HomePage;

  ngAfterViewInit() {
    this.homePage.testChild();
  }
}

See also:

Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720
  • thanks for reply. But is not working yet. Same error. No matter from where i call it the error is the same. – FrancescoMussi Nov 28 '16 at 13:37
  • @johnnyfittizio is the home page component actually a component in the template? This is what `@ViewChild` is for – Paul Samsotha Nov 28 '16 at 13:41
  • Yes HomePage is the root component and is imported in the app.component. the app.html is a double menu where on the right menu there is a login form. the form is working, all the login is inside the app.component. Inside the app.component form submit function I will just need to call a method of the homePage component. – FrancescoMussi Nov 28 '16 at 13:46
  • 2
    @johnnyfittizio But is the `` component _directly_ in the template of the component you are trying to access it from? – Paul Samsotha Nov 28 '16 at 13:50
  • Well i think no. Both component has their own template. But the Home template is called from the App component template: . So you say that Home component is not exactly the child of App component? – FrancescoMussi Nov 28 '16 at 13:54
  • 2
    @johnnyfittizio It's not. Not at compilation time, the time that it needs to be. Ionic uses dynamic component loading. This will not work with `@ViewChild`. Maybe you should look into using a service to allows the components to communicate – Paul Samsotha Nov 28 '16 at 14:03
  • Ok thanks. I will then mark your reply as correct. If you time can you please look at this: https://stackoverflow.com/questions/40841612/ionic-2-how-to-manage-global-variables I really cannot find a proper solution – FrancescoMussi Nov 28 '16 at 14:07
  • @johnnyfittizio based on that post, try using a Subject, as [mentioned here](http://stackoverflow.com/a/40469735/2587435) – Paul Samsotha Nov 28 '16 at 14:15