Verify if the page was generated as a regular Page or a modal page

Within the UpgradePage, I have a scenario where I want to navigate to the same page either through the side menu or as a modal page using push/setRoot.

Q: The method upgradeLater() is where I need to make a decision on whether to redirect to another page, HomePage, or simply close it as a popup using this.viewCtrl.dismiss();. Is there a way to achieve this?

Note: Specifically, how can I determine if the current page was created as a modal or not?

upgrade.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-upgrade',
  templateUrl: 'upgrade.html',
})
export class UpgradePage {

  constructor(private navCtrl: NavController, private navParams: NavParams) {
  }

  upgradeLater() {
    if("coming from side menu"){
     this.navCtrl.setRoot('HomePage');
   } else{
     this.viewCtrl.dismiss(); //if loaded this page as modal page
   }
  }
}

Answer №1

If you want to pass a parameter to a page, whether it's shown as a modal or a regular page, you can do so easily.

For a modal page:

let profileModal = this.modalCtrl.create(UpgradePage, { type: 'modal'});

For a regular page:

this.navCtrl.push(UpgradePage, {type: 'page'});

Then in your UpgradePage:

type;
constructor(private navCtrl: NavController, private navParams: NavParams)
{
  this.type= navParams.get('type');
}

upgradeLater() {
  if(this.type=='page'){
    this.navCtrl.setRoot('HomePage');
  } else{
    this.viewCtrl.dismiss(); //if loaded this page as a modal
  }
}

UPDATE: In the navCtrl, modal and regular pages are treated the same way, allowing you to close them with pop() when using push(). More information can be found here.

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

Challenge with Routing in Angular 2

I'm dealing with a route setup like this: path: 'something/:id/somethingElse' In my header.component.html, I need to include a link to this page. I tried the following approach: <a routerLink="['something',myIdThatIsDynamicO ...

Encountering issues with Typescript when using absolute paths

After updating a forked repository, I noticed that TypeScript is no longer recognizing absolute paths. Surprisingly, I have not made any changes to my tsconfig.json: { "compilerOptions": { "allowJs": true, "allowSyntheticDefaultImports": true, ...

The "pointer" cursor style is simply not functioning in any way

Here is the angular template code I am working with: <!-- Modal --> <ng-template #levelsmodal let-c="close" let-d="dismiss"> <div class="modal-header"> Select the levels you want to show in the table and chart ...

The directive within the module was not carried out

After setting up a fresh module in my Angular 8 project and adding a new directive to it, nothing seemed to happen at runtime (although the compilation was successful). I even added console logs to the directive to check if it was being executed different ...

Angular 2 - update browsing history by replacing instead of adding to it

Is it possible to replace the history instead of pushing a new one in Angular 2's new router (rc.1)? For instance, suppose I am in a question list (/questions), then open a new modal in a new route (/questions/add). After adding a new question, I nav ...

Error message: "Angular 2 encountered an issue while attempting to access the property 'nativeElement' of an

Hello, I'm having issues retrieving data (which has been extracted after using ngFor) from the HTML using viewChildren and elementRef. I keep receiving the error message: Cannot read property 'nativeElement' of undefined Can someone please ...

What is the correct way to construct this query?

I've been attempting to run this query with Sequelize but keep encountering an error Query LineItem.findAll( { attributes: [ "orderId", [fn("sum", col("quantity")), &qu ...

Combining Closure Compiler with Typescript

My objective is to leverage Typescript along with Closure Compile (advanced compilation) to target ES5 and then minify the resulting output. Is it mandatory for me to replace tsc with tsickle? I find that tsickle does not provide support for all options a ...

Get instant access to the Angular page at your fingertips. Experience the best of both worlds with a hybrid application

Is it possible to create an Angular application that loads only a few pages initially? For example, suppose I have a web application that produces a 25 MB build. Can I separate it and move certain components so they are only loaded when the corresponding U ...

Issues arise due to data inconsistency stemming from the combination of a for loop and .map() function within the BACK4APP

I seem to be facing a challenge with data consistency caused by the for (const object of results) {} loop in the Sandbox Link at line41. The issue is that the results are displayed as a single result after using the .map() method. However, when I perform a ...

How to Modify a Module that was Imported in Typescript

Apologies for my inexperience in this language. I've been working on a custom Discord bot and encountered a problem. I implemented the feature to load commands dynamically from a folder, with each command as a module. However, when trying to create a ...

a callback may seem like it's not a function, but in reality, it is

This question might seem simple, but I'm struggling to grasp the concept of callbacks, especially in NodeJS. My issue arises when trying to retrieve data from MySQL, something that is usually straightforward in most programming languages: In my rout ...

Having trouble with React state not updating?

Hello, I am a beginner in the world of React and currently working on fetching an array of endpoints. My goal is to update the API's status every 15 seconds. Here is the code snippet for the array of endpoints: export const endpoints: string[] = [ " ...

Stop the flow of data in the RxJS stream depending on a specific value within the stream

I developed a straightforward component featuring a single button that initiates and halts a sequence of numbers generated by RxJS timer. import { Component, OnInit } from '@angular/core'; import { BehaviorSubject, Observable, timer, merge } fro ...

Loading a view in Ionic2 with Angular2 after a successful subscription

After completing an http post request, I want to navigate to the next view in my app. Here is a breakdown of the three services I am using: The server service handles generic http calls such as get and post requests. The city service stores a list of ...

"Experience the power of Angular with 15 incredibly dynamic components utilizing the compileModuleAndAllComponentsAsync function

Currently, I am in the process of transitioning a project from Angular 8 to version 15. One of the key features of the application is dynamic product cards, where the template for these cards is arbitrary HTML loaded from the server and unknown during deve ...

How can we ensure that Protractor's ElementArrayFinder 'each' function pauses until the current action has finished before moving on to the next iteration?

Currently, I am facing an issue while trying to utilize an 'each' loop in my Angular 8 app's end-to-end tests using protractor. Within my page object, I have created a method that returns an ElementArrayFinder. public getCards(): ElementArr ...

Issue with TypeScript: Declaring type for objects in an array using .map

I'm having trouble assigning types to the Item object that is being returned from unitedStates.map((item: Item) => {}. Despite my efforts, I am unable to correctly define the types. Although I have specified the unitedStates array of objects as un ...

retrieve the preferred item data from the local storage

Having trouble retrieving favorite items from my list item app using Ionic 4. Although my JSON data is added to local storage, I am unable to retrieve the data properly. favourite.service.ts getAllFavoriteItems(){ return this.storage.get("object"); ...

Create a Bar Graph Using a List

Looking to generate an Angular Barchart from a JPA query in Spring: public List<PaymentTransactionsDailyFacts> findPaymentTransactionsDailyFacts(LocalDateTime start_date, LocalDateTime end_date) { String hql = "SELECT SUM(amount) AS sum_volume, ...