CODEWITHSUNDEEP
javascripttypescriptionic3
someone
someone

Reputation: 39

How can I change an element between differente pages in ionic 3?

My question is in the logic of how to exchange information between these two pages. Is it possible?

The checklist is working, but I have no idea how to have a success / error icon added to the 'verifyplace.html' page next to the Room name after returning success in the goToNextPage () function. How to make this change between different pages?

The pages are below(.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 on the previous page a success icon*/
        } else {
            this.navCtrl.push(VerifyplacePage);
            /*return on the previous page an error icon*/
        }
    }

Upvotes: 2

Views: 40

Answers (1)

Triple0t
Triple0t

Reputation: 444

this is my understanding;

you are on VerifyroomPage page and you wish to navigate to another page (VerifyplacePage) while passing some parameters across.

you can achieve this by passing an object as the second parameter of the push method on the Ionic Nav Controller. 

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

OR

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

Step 2:

Then on the VerifyplacePage.ts 

// create a variable to hold the data
thePageData

...

// in the constructor
public navParams: NavParams,

...


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

Read more on Navigation within ionic 3 here

Upvotes: 1

Related Questions