[Solved] How to access component function?

Ionic Framework ionic-v3
1

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>
})

My page scan
scan.ts

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

2

i’m beginner help me please T T

3

I you want to display a modal you have to use the ModalController

You could find information there:

and the demo source:

4

@ViewChild would be one possibility, but I would prefer binding an input property in the component to a boolean that indicates the loading state. You could probably just do it with a class binding.

1 Like