How to pass data to another page in ionic-Angular

Issue

I'm new to using ionic and I don't have any idea on how to pass the data to another page.

here is the html file, page 1.

<ion-header>
  <ion-toolbar>
    <ion-title>
      <nav id="aboutnav"> 
        <ion-img src="assets/img/logo.png"></ion-img>
        <div id="aboutlist">
         <ul>
           <ion-icon (click)="home()" name="home"></ion-icon>
         </ul> 
        </div>
      </nav>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card *ngFor="let question of questions">
    <ion-card-header>
      <ion-card-title>
        <h4>{{question.title}}</h4>
      </ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-text>
        <h6>Rating:</h6>
      </ion-text>
      <div margin-vertical text-center>
        <ion-radio-group [(ngModel)]="question.answer">
          <ion-item>
            <ion-radio value=0></ion-radio>
            <ion-label> Not at all</ion-label>
          </ion-item>
          <ion-item>
            <ion-radio value=2></ion-radio>
            <ion-label>For some of the time</ion-label>
          </ion-item>
          <ion-item>
            <ion-radio value=4></ion-radio>
            <ion-label>For most of the time</ion-label>
          </ion-item>
          <ion-item>
            <ion-radio value=5></ion-radio>
            <ion-label>For all of the time</ion-label>
          </ion-item>
        </ion-radio-group>
      </div>
    </ion-card-content>
  </ion-card>

  <div margin-vertical text-center>
    <ion-button (click)='getQuestionResults()'>SUBMIT</ion-button>
  </div>
</ion-content>

here is the page 1 ts file.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

export interface question {
    title: string;
    answer: Number[];
}

@Component({
    selector: 'app-evaluation',
    templateUrl: './evaluation.page.html',
    styleUrls: ['./evaluation.page.scss'],
})
export class EvaluationPage implements OnInit {

    questions: question[] = [];

    constructor(private route: Router) { }

    home(){
        this.route.navigate(['/home']);
    }

    Result(){
        this.route.navigate(['/result']);
    }

    ngOnInit() {
        // Questions
        for(let i = 1; i <= 1; i++) {
            this.questions.push({
                title: `Little interest or pleasure in doing things`,
                answer: undefined
            });
            this.questions.push({
                title: `Feeling down, depressed, or hopeless`,
                answer: undefined 
            });
         }
    }

    getQuestionResults(){
        // no need to "get" the results
        // they are already bound to the questions property
        console.log(this.questions);
        let sumA = 0;
    
        for (const q of this.questions) {
            sumA += Number(q.answer || 0);
        }

        if (sumA<=39) {
            console.log("No Sign of Depression")
        }
        else if(sumA>=40 && sumA<=59) {
            console.log("Mild Sign of Depression")
        }
        else if(sumA>=60 && sumA<=79) {
            console.log("Moderate Sign of Depression")
        }
        else if(sumA>=80 && sumA<=100) {
            console.log("Severe Sign of Depression")
        }
        else {
            alert("Error!")
        }
    }
}

After getting the result and printed it on the console for the if-else, I want to pass the result to another ionic app page and print it on the page interface. .

Solution

There are some ways to do it, from a simplest to more advanced. You can start to passing all data as query params (I don't like this option).

Other way could be build a service which will be instanced in both components, before to move to other component you can save the data and consume from the other side on ngOnInit() for example.

On the other hand, you always can use localStorage as an interchange space (maybe will be useful to other things in the future).

There are other options with RxJs but if you don't have experience I think that will be better keep apart.

Answered By - Juan Antonio