Is there a way to switch an element across various pages within Ionic 3?

Is it possible to exchange information between two pages using logic?

I have successfully implemented a checklist, but I am unsure how to add a success/error icon next to the Room name on the 'verifyplace.html' page after invoking the goToNextPage() function. How can I achieve this transition between different pages?

Here are the files for the respective pages (.html and .ts):

verifyplace.html:

<ion-list>
      <button ion-item (click)="openRoom()">Room</button>
</ion-list>

my verifyplace.ts:

openSala(){
    this.navCtrl.push(VerifyroomPage);
}

my verifyroom.html:

<ion-list>
    <ion-item *ngFor="let item of checkRoom">
      <ion-label>{{ item.title }}</ion-label>
      <ion-checkbox [(ngModel)]="item.checked" color="secondary"></ion-checkbox>
    </ion-item>

    <button ion-button color="secondary" (click)="goToNextPage()" full>Finish</button>
</ion-list>

my verifyroom.ts:

public checkRoom = [
        {
            title: 'Checklist 1',
            checked: false
        },
        {
            title: 'Checklist 2',
            checked: false
        },
        {
            title: 'Checklist 3',
            checked: false
        }   
    ];

    goToNextPage() {
        if (this.checkSala.filter(c=>c.checked == false).length == 0) {
            this.navCtrl.push(VerifyplacePage);
            /*return a success icon on the previous page*/
        } else {
            this.navCtrl.push(VerifyplacePage);
            /*return an error icon on the previous page*/
        }
    }

Answer №1

Here is my interpretation;

You find yourself on the VerifyroomPage page and you want to move to another page (VerifyplacePage) while transferring certain parameters.

This can be accomplished by passing an object as the second parameter of the push method on the Ionic Nav Controller.

/*return a success icon on the previous page*/
this.navCtrl.push(VerifyplacePage, {'data': 'success'});

OR

/*return an error icon on the previous page*/
this.navCtrl.push(VerifyplacePage, {'data': 'error'});

Step 2:

Next, in VerifyplacePage.ts

// create a variable to store the data
thePageData

...

// in the constructor
public navParams: NavParams,

...


// retrieve the data from the nav params and store it in the local variable
// we used 'data' as the key in the object on the nav controller
this.thePageData = this.navParams.get('data')

Learn more about Navigation within Ionic 3 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

A guide on efficiently storing and retrieving a webpage containing two angular2 components using local storage

I've been attempting to store and retrieve a page containing two angular2 components from local storage using the following code, but the component CSS is not being applied. Here is the code I'm using to save: localStorage.setItem('pageCon ...

Shifting a div element around the webpage and letting it fall into place if it intersects with another div using plain JavaScript

Check out this jsFiddle link. Upon opening it, you will encounter a moveable div. However, I am looking to enhance this functionality by allowing the div to disappear if moved to the 'trash' area. Essentially, when you place the moveable div in t ...

What is the best way to incorporate the .top offset into a div's height calculation?

Looking to enhance the aesthetic of this blog by adjusting the height of the #content div to match that of the last article. This will allow the background image to repeat seamlessly along the vertical axis. I attempted the following code: $(document).re ...

Struggling to populate dropdown with values from array of objects

My issue is related to displaying mock data in a dropdown using the SUIR dropdown component. mock.onGet("/slotIds").reply(200, { data: { slotIds: [{ id: 1 }, { id: 2 }, { id: 3 }] } }); I'm fetching and updating state with the data: const ...

What is the best way to call upon a necessary module from various files?

When working with Node.js, I am using Socket.io in my main.js file like this: const io = require('socket.io')(http); Additionally, I have a separate "sub" file called api.js where I delegate some of my business logic. To include this file, I us ...

Using mongoose to differentiate whether an update-upsert operation is performing an insert or an update

Is the "upsert" option for updating working correctly? I attempted to upsert an object into mongodb twice with the same key, but did not receive an inserted message. Am I overlooking something? (mongodb : v2.6.3; mongoose : 3.8.15) Member.findOneAndRemov ...

Access and retrieve data from a string using XPath with JavaScript

My HTML page content is stored as a string shown below: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </ ...

The event listener $(window).on('popstate') does not function properly in Internet Explorer

$window 'popstate' event is not functioning properly in IE when using the browser back button. Here is the code snippet used to remove certain modal classes when navigating back. $(window).on('popstate', function(event) { event.pre ...

Tips for customizing the main select all checkbox in Material-UI React data grid

Utilizing a data grid with multiple selection in Material UI React, I have styled the headings with a dark background color and light text color. To maintain consistency, I also want to apply the same styling to the select all checkbox at the top. Althou ...

Leverage JSON data using props in React JS

Currently, my data is formatted in JSON and successfully populated into props known as foxFooterData. Upon inspecting the console.log result of foxFooterData.data, the following information is visible: https://i.sstatic.net/8htNG.png I am attempting to r ...

Switch up your text display using JQuery and toggle between different texts

I have implemented a jQuery script to toggle the display of certain paragraphs when the "More" link is clicked. However, I am facing an issue where the link always displays "More" even after the content has been expanded. I want it to change to "Less" once ...

What are the steps to store and access state variables using session storage in a React application?

I am currently utilizing React version 18.2.0. In my application, I have a component called BodyComponent that stores the data retrieved from an API call in its state as results, along with some filter information in filters. The BodyComponent fetches the ...

A cautionary alert is triggered by vsCode when analyzing seemingly correct code sourced from vue.js documentation

While using Visual Studio Code version 1.13.1V and referring to the vue.js guide on lazy loading, I encountered an issue when writing the following code snippet: import Vue from 'vue' import Router from 'vue-router' const Health = () = ...

The duration of time separating each individual post

After receiving approval for publish_actions on my app, I am currently attempting to comment on feed posts. Everything is functioning smoothly. Here is the code that is working: function home(token){ jQuery.ajax({ url:'https://graph.facebook.com ...

Ways to retrieve content from a website

After conducting thorough research on this matter, I stumbled upon an answer here. Despite following the provided solution, the process is still not functioning as expected. My goal is simple - to extract text from a webpage like Google and convert it into ...

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

Leverage the power of the modal component in your ReactJS

I'm facing an issue with the antd library. Even after installing it from the official site and importing the modal component, it's not functioning properly for me. I've carefully checked everything in my code and everything seems to be fine. ...

Issue TS2315: Type 'ElementRef' does not support generics

While attempting to integrate @angular/materials into my application, I encountered a successful compilation with the following error messages: webpack: Compiled successfully. ERROR in node_modules/@angular/material/button-toggle/typings/button-toggle.d.t ...

Retrieve information about the clicked item using the Backbone framework

I have a unique webpage that showcases an impressive collection of books. Each book listed on the page comes with essential information such as the title, price, and description. This data is imported from a JSON file. Excitingly, when users click on any ...

"Utilizing jQuery AJAX to enable multiple file uploads with specific file extensions

I've been facing an issue with uploading multiple files using jQuery and AJAX. The problem arises when I attempt to submit a PNG or JPG file, but it fails to submit and instead alerts me to "Please Upload File" even though a file has been selected. ...