Having trouble with the setRoot() function not working properly in IONIC 3 after dismissing a modal menu. Any suggestions for a solution

Here is the code snippet I am using to display a modal from the HomePage.

import { SignaturePage } from '../signature/signature'
import { NavController, NavParams, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})

export class QuotationPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public modalController:ModalController) {
      this.signatureImage = navParams.get('signatureImage');
  }
   //Clicking on the approve button will trigger the modal to appear
   approvebtn(){
     let modal = this.modalController.create(SignaturePage,{
        "text": "something"
     });
     modal.present();
   }
}

TS code for the modal page. When attempting to set the home page as the root page, the navigation does not work and the setRoot function also fails for setting the root page.

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, ViewController} from 'ionic-angular';
import {SignaturePad} from 'angular2-signaturepad/signature-pad';
import { HomePage } from '../home/home';

@Component({
  selector: 'page-signature',
  templateUrl: 'signature.html',
})
export class SignaturePage {
  @ViewChild(SignaturePad) public signaturePad : SignaturePad;
  @ViewChild('myNav') nav: NavController;

  quotetext:any = "";
  public signaturePadOptions : Object = {
    'minWidth': 2,
    'canvasWidth': 320,
    'canvasHeight': 348
  };
  public signatureImage : string;

  constructor(public navCtrl: NavController, public navParam:NavParams, public viewCtrl:ViewController) {
  }

  drawCancel() {
    this.viewCtrl.dismiss();
  }

Below is the transition function

   drawComplete() {
    this.signatureImage = this.signaturePad.toDataURL();
       this.navCtrl.setRoot(HomePage);
  }

  drawClear() {
    this.signaturePad.clear();
  }

}

Answer №1

When navigating from an Overlay Component, make sure to follow the steps outlined below.

import { App, ViewController } from 'ionic-angular';

constructor(private viewCtrl: ViewController,private appCtrl: App) {}

drawComplete() {
    this.signatureImage = this.signaturePad.toDataURL();
    this.appCtrl.getRootNav().setRoot(HomePage);
  }

For more information on navigating from an overlay component, check out this link.

Answer №2

To navigate back to the root page, you can use the popToRoot() method.

this.navCtrl.popToRoot();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Angular's efficiency problems when dealing with extensive datasets and prime NG datagrids

An angular application (V4.1) has been developed using primeNG components, focusing on data tables. The app was originally created for small clients and had no issues handling 2K-3K table rows with efficient filtering capabilities akin to a spreadsheet. R ...

"Exploring the relationship between Vue checkbox components: parent and

Currently, I am working on a checkbox group where the behavior is such that if the parent checkbox is checked, all the child checkboxes will also be checked. Similarly, if a child checkbox is checked, the parent checkbox should also get checked, and so on. ...

send the checkbox control's model value back to the parent control in Vue3

I've implemented a wrapper control for checkboxes that closely resembles my textbox control. This approach ensures consistent validation and design throughout the application. While I was successful in getting it to work for textboxes, I encountered s ...

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

My directory structure is as follows: - project |- build |- src |- index.ts |- file.txt The typescript code is compiled to the build directory and executed from there. I am seeking a dependable method to access file.txt from the compiled module without ...

Arranging JSON elements according to a separate array in Angular 2 or Node.js

Looking for a solution with optimal performance, I am seeking to achieve the rearrangement of a list using either Angular2 or NodeJS. My input consists of user fruit preferences' IDs {15, 43, 55, 67, 98}; In addition, I have a JSON object containin ...

Displaying and concealing a subcomponent within a parent element for a set duration of time

I have a notification component that is displayed as a child component in the parent component after a button click. It automatically hides after a certain number of seconds. Here is the code I have developed: MyCode Parent component: <button (click)= ...

What is the best way to transfer the userId from the browser to protractor?

Using *ngFor in my angular2 component to render users has been successful. <ul> <li *ng-for="let user of users"> <input [(ng-model)]="user.name"> <button (click)="remove(user._id)">Remove</button> ...

Guide to setting up a one-to-many self relation entry in Prisma

I am facing a challenge with a simple schema model that includes one-to-many self relations. In this scenario, my goal is to create a parent entity along with its children in a single transaction. How can I accomplish this task effectively? data-model Y{ ...

Retrieving a specific user attribute from the database using Angular

Currently, I am working on developing an application that utilizes ASP.NET for the Back End (API) and Angular for the Front End of the application. Within the API, I have set up controllers to retrieve either a list of users from the database or a single ...

Tips for validating and retrieving data from a radio button paired with an input box in reactjs

I'm diving into the world of React and facing a challenge with multiple radio buttons that have associated input fields, like in this image: https://i.stack.imgur.com/Upy3T.png Here's what I need: If a user checks a radio button with a ...

typescript: best practices for typing key and value parameters in the forEach loop of Object.entries()

I have a specific object with key/value pairs that I need to iterate over using the entries() method of Object followed by a forEach() method of Array. However, I'm struggling to understand how to avoid a typescript error in this situation: type objTy ...

Passing a username and password to an API in Angular 6: Step-by-step guide

Can someone assist me with this problem? I am struggling to pass the username and password in my API request for a list of homes. Every attempt I've made has resulted in an unauthorized access error. How do I correctly include the user credentials (pe ...

How can you connect a property to the output of a method in Vue.js when working with TypeScript and vue-property-decorator?

I'm working with a TypeScript single file vue component. I've encountered an issue where the template does not display the values returned by certain component methods. Here's a snippet of the template: <div class="order-items"> ...

Error in Typescript: The identifier 'Proxy' is unknown

I'm trying to create a new variable using the Proxy type from the ES6 specification: myProxy: Proxy; However, I'm encountering the following error: Cannot find name 'Proxy'. Can anyone point me in the right direction to resolve th ...

Dynamic labeling of breadcrumbs in Angular is the way to go!

I am aiming to develop a breadcrumb navigation system with one element that changes dynamically. Here's an example: Home > Category A > Subcategory 1 > XYZ The categories "Category A" and "Subcategory 1" remain constant, while "XYZ" varies ...

undefined event typescript this reactjs

I have come across the following TypeScript-written component. The type definitions are from definitelytyped.org. I have bound the onWheel event to a function, but every time it is triggered, this becomes undefined. So, how can I access the referenced el ...

Storing information from a mat-select element in MongoDB database

I have a collection of Players and Teams. I want to assign players to teams. In my HTML, I create a Team form where users can select players to load: <mat-form-field> <mat-select placeholder="Goalkeepers" formControlName="goalkeeper"> & ...

Unable to place value into an array following the invocation of a function in Angular 9

Within an array I established, I am encountering an undefined value when I use console.log. Take a look at my component.ts below: export class OrderExceptionReportComponent implements OnInit { public sessionData: ExceptionReportSessionData[] = []; n ...

Tips for optimizing the functionality of the Angular search filter

When I type a search string in the column "Failure signature" in my code, it doesn't seem to work. The data is not filtered based on the search string provided, and an error is thrown. I have identified the line where the error occurs. I have created ...

Issue with retrieving properties in Angular template due to undefined values in HTML

As a newbie to Angular, I am dedicated to improving my skills in the framework. In my project, I am utilizing three essential files: a service (Studentservice.ts) that emits an observable through the ShowBeerDetails method, and then I subscribe to this ob ...