Angular 2 ionic 2, calling a child component undefined

Question

I have a global footer in my ionic app, the way I did it is this way. I added the selector component inside the ion-nav and it is working well. My footer is showing in every page.

in the app.html

<ion-nav [root]="rootPage" #content swipeBackEnabled="false">

</ion-nav>
<call-footer #CallChild></call-footer>

However, in one the pages, I want to have control of the footer and I may hide it or change the variables inside it. In my footer component i have a function called 'test' and in one of the pages('calls') I am trying this.

calls.ts

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

import { oncallpage } from '../calls/oncall/oncall';
import { callfooter } from '../../components/callfooter/callfooter.component';

@Component({
    selector: 'page-calls',
    templateUrl: 'calls.html'
})
export class callspage implements OnInit {

    @ViewChild('CallChild') child;


    constructor() { }


      ngAfterViewInit() {
         this.child.test(); //error
  }

However I am getting "Cannot read property 'test' of undefined"

I am not sure if there is a syntax error or I am missing some idea. How can I solve this case?

the code below is the calls.html. maybe the edit still didn't refresh — Missak Boyajian, May 09 '17 at 07:57
oh its almost empty till now. But I have a button in the header, when I call it I want to execute a function in the footer component. I put the code — Missak Boyajian, May 09 '17 at 08:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143753/discussion-between-missak-boyajian-and-echonax). — Missak Boyajian, May 09 '17 at 08:07

score 4 · Accepted Answer · edited May 23 '17 at 11:54

4

The @ViewChild returns an ElementRef. You can't invoke a function like that.

A workaround would be to use ionic's Events (docs)

Change your function to:

ngAfterViewInit() {
   this.events.publish("child:test");
}

And in your child page:

constructor(events: Events) {
  events.subscribe("child:test", ()=> {
     this.test();
  });
}

test() { console.log("test called"); }

Also for a more detailed explanation, refer to my answer here How to update value inside ionic 2 side menu

edited May 23 '17 at 11:54

Community

1
1

answered May 09 '17 at 08:13

Ivar Reukers

7,560
9
56
99

Hi, follow up question. I am trying something like this //callspage this.events.publish("child:initializefooter",this); //footer events.subscribe("child:initializefooter", (page) => { this.ModalExitCall = page; this.ModalExitCall.present(); //opens the model. Getting Error: //No component factory found for [object Object] }) Is there a way to cast the input parameter as component ? – Missak Boyajian May 09 '17 at 12:50
On my phone at the moment but look into Angular's `output` arguments. You'll be able to call a function with them – Ivar Reukers May 09 '17 at 13:27

Angular 2 ionic 2, calling a child component undefined

1 Answers1