ionic 2 - How to access component function from parent

Question

I have custom loading (SearchingModalComponent) i want to call function show() in SearchingModalComponent

SearchingModalComponent

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

@Component({
    selector: 'searching-modal',
    templateUrl: 'searching-modal.html'
})
export class SearchingModalComponent {
    public show_classname: any;

    constructor() {
        this.show_classname = ""
    }

    public show() {
        this.show_classname = "busy";
    }

    hide() {
        this.show_classname = "";
    }
}

app.modules.ts

import { SearchingModalComponent } from '../components/searching-modal/searching-modal';

@NgModule({
    declarations: [
        MyApp,
        HomePage,
        ScanPage,
        SearchingModalComponent
    ],
    imports: [
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage,
        ScanPage
    ],
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, [ScreenSaver]]
})
export class AppModule {}

app.component.ts

@Component({
    template: `
        <ion-nav [root]="rootPage"></ion-nav>
        <searching-modal id="loading" #Searching></searching-modal>
    `
})

root page

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SearchingModalComponent } from '../../components/searching-modal/searching-modal';

@Component({
    selector: 'page-scan',
    templateUrl: 'scan.html'
})
export class ScanPage {

    constructor(public navCtrl: NavController
    , public ScreenSaverPrivid: ScreenSaver
    , public SearchingModal: SearchingModalComponent
    ) { }

    openLoading() {
        this.SearchingModal.show();
        console.log('openLoading');
    }
}

system information:

Cordova CLI: 6.0.0

Ionic Framework Version: 2.0.0-rc.3

Ionic CLI Version: 2.1.14

Ionic App Lib Version: 2.1.7

Ionic App Scripts Version: 0.0.46

ios-deploy version: Not installed

ios-sim version: Not installed

OS: Windows 10

Node Version: v6.9.1

Xcode version: Not installed

EDIT [Solved] Thank you Hadrien TOMA

move <searching-modal id="loading" #Searching></searching-modal>
to scan.html

Hadrien TOMA Hadrien TOMA · Accepted Answer · 2016-12-03T11:00:38

You just need to use ViewChild and to put a reference for your child in your parent template (as you have already done), here you can see a simple example of how to do that.

EDIT : Adding some tips

Moreover, you have to call @ViewChild in the component relative to the template that has the reference, in your case you have two options : move <searching-modal id="loading" #Searching></searching-modal> to scan.html or move openLoading(){...} and @ViewChild(...)... to app.component.ts. The first option is for me the best.

ionic 2 - How to access component function from parent

1 Answers