Accessing Component Instance in Ionic 3 Modal Controller

Question

Accessing Component Instance in Ionic 3 Modal Controller

I am currently displaying a Component called EventFeedbackComponent through ModalController. I want to subscribe to a Subject within the EventFeedbackComponent. How can I access the component instance in order to achieve this?

This is what my code looks like:

let modal   =   this.modalCtrl.create(EventFeedbackComponent);
modal.present();

// This code snippet is not functioning correctly and throws an error "ERROR TypeError: Cannot read property 'subscribe' of undefined"
modal._component.feedbackSubmit.subscribe(feedbackResponse => {
    console.log(feedbackResponse);
});

The documentation provided did not offer assistance in solving this issue: https://ionicframework.com/docs/api/components/modal/ModalController/

Here is the scenario where I need to implement this:

I have a list of Events in my Service that require feedback.
The EventFeedbackComponent contains features for gathering feedback on individual events.
I display the EventFeedbackComponent to collect feedback for the first event and listen for the event feedbackSubmit using a Subject.
Upon submission of the feedback, I display a Success Toast message and update my service variable to move on to the next event.
This process is repeated until feedback is obtained for all unreviewed events, utilizing the same Component displayed through a Modal.

angular typescript ionic-framework ionic3

Answer 1

Answer №1

Dismiss Modal with Parameters - Option 1

The Ionic modal component allows for closing dialogs with specific arguments:

modal.ts

constructor(public viewCtrl: ViewController) {
  this.prop = params.get('prop');
}

dismiss() {
  this.viewCtrl.dismiss({ test: '1' });
}

In the opener file, you should include:

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 'prop': 'prop1' });

modal.onDidDismiss(data => {
  alert('Closed with data:' + JSON.stringify(data));
});

If the above method is not sufficient, consider using:

Interact via ViewContainer.emit - Option 2

Utilize the ViewController::emit method to communicate data to the opener

modal.ts

constructor(public viewCtrl: ViewController) {}

sendFeedBack() {
  this.viewCtrl.emit({ someData: '2' });
}

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 'prop': 'prop1' });

modal.onDidDismiss(data => {
  alert('Closed with data:' + JSON.stringify(data));
});

modal.present().then(result => {
  modal.overlay['subscribe']((z) => {
    alert(JSON.stringify(z));
  })
});

Implement Input Callback - Option 3

Possibly pass a callback function as a parameter to the modal:

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 
  'prop': 'prop1', 
  onFeedBack: (data) => {
    alert('Input callback' + JSON.stringify(data));
  }
});

modal.ts

onFeedBack: Function;

constructor(params: NavParams) {
  this.onFeedBack = params.get('onFeedBack');
}

sentThroughInputCallback() {
  this.onFeedBack({ s: '2' });
}

To receive the component instance, follow Option 4 below:

Access Component Instance - Option 4

You can only access the component instance after it has been created:

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 'prop': 'prop1' });

modal.present().then(result => {
  const testComp = modal.overlay['instance'] as TestComponent;
  testComp.feedbackSubmit.subscribe(() => {
    alert(1);
  })
});

Explore further on Ng-run Example

Answer 2

Dismiss Modal with Parameters - Option 1

The Ionic modal component allows for closing dialogs with specific arguments:

modal.ts

constructor(public viewCtrl: ViewController) {
  this.prop = params.get('prop');
}

dismiss() {
  this.viewCtrl.dismiss({ test: '1' });
}

In the opener file, you should include:

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 'prop': 'prop1' });

modal.onDidDismiss(data => {
  alert('Closed with data:' + JSON.stringify(data));
});

If the above method is not sufficient, consider using:

Interact via ViewContainer.emit - Option 2

Utilize the ViewController::emit method to communicate data to the opener

modal.ts

constructor(public viewCtrl: ViewController) {}

sendFeedBack() {
  this.viewCtrl.emit({ someData: '2' });
}

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 'prop': 'prop1' });

modal.onDidDismiss(data => {
  alert('Closed with data:' + JSON.stringify(data));
});

modal.present().then(result => {
  modal.overlay['subscribe']((z) => {
    alert(JSON.stringify(z));
  })
});

Implement Input Callback - Option 3

Possibly pass a callback function as a parameter to the modal:

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 
  'prop': 'prop1', 
  onFeedBack: (data) => {
    alert('Input callback' + JSON.stringify(data));
  }
});

modal.ts

onFeedBack: Function;

constructor(params: NavParams) {
  this.onFeedBack = params.get('onFeedBack');
}

sentThroughInputCallback() {
  this.onFeedBack({ s: '2' });
}

To receive the component instance, follow Option 4 below:

Access Component Instance - Option 4

You can only access the component instance after it has been created:

opener.ts

let modal = this.modalCtrl.create(TestComponent, { 'prop': 'prop1' });

modal.present().then(result => {
  const testComp = modal.overlay['instance'] as TestComponent;
  testComp.feedbackSubmit.subscribe(() => {
    alert(1);
  })
});

Explore further on Ng-run Example

Accessing Component Instance in Ionic 3 Modal Controller

Answer №1

Dismiss Modal with Parameters - Option 1

Interact via ViewContainer.emit - Option 2

Implement Input Callback - Option 3

Access Component Instance - Option 4

Similar questions

Exploring the power of Angular 2 with Jasmine tests

Is Angular 2 giving you trouble with the AoT compilation and module.id error?

Is there a way to fetch a particular object from Firebase database based on its value using AngularFire2?

Refreshing an Angular2 page is triggered by the update of a specific property

Tips for utilizing the "??=" syntax in Typescript

Arrange chat participants based on the latest messages using React

Generate a unique Object URL for the video source by utilizing the binary string obtained from the backend

Using a Type Guard in Typescript to check if an environment variable matches a key in a JSON object

Using template variable in Angular5 to create a dependant dropdown feature

Tips for verifying the presence of a value within an array using checkboxes

Adding Components Dynamically to Angular Parent Dashboard: A Step-by-Step Guide

What is the solution to the TypeScript error stating that there is no index signature with a parameter of type 'string' on the 'Object' type?

Concealing the value of the variable within the state function

Angular 5: Steps to send an event from authguard to header in Angular application

Maximizing the potential of useRef within a function handler when utilizing hooks

Encountering a hiccup while trying to install Svelte, Skeleton, and Tail

Eliminate the use of type assertion when verifying if a value is included in a union

Utilizing Ace with a personalized theme in Angular 2 application while straying away from the default theme directory

ng2-dragula error: issues with setting options and dropping version

The variable remains unchanged after the API call, despite using useState