How to pass data to another page in ionic-Angular

Question

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. .

Check this https://stackoverflow.com/questions/65607106/pass-the-data-between-pages-in-ionic-5 — Danil Prokhorenko, Jul 19 '21 at 03:29

chris burd · Answer 1 · 2021-07-19T08:06:31.417

The best way would be for you to create a behaviorsubject using rxjs and subscribe to the data elsewhere:

ng g s services/depression-scale

edit that file like so

private depressionData = new BehaviorSubject<any>('')
public depressionData$ = this.depressionData.asObservable();

setDepressionScale(question: string){
this.depressionData.next(question)
}

import this file into your ionic component

import { DepressionScaleService } from './../services/depression-scale/depression-scale.service'

before constructor add:

depressionScale: string;

in your constructor

constructor(private dss:DepressionScaleService){}

edit your component typescript and add the calls to store the data:

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){
     this.dss.next('no sign of depression')
  console.log("No Sign of Depression")
  }
  else if(sumA>=40 && sumA<=59){
this.dss.next('mild sign of depression')
   console.log("Mild Sign of Depression")
   }
   else if(sumA>=60 && sumA<=79){
this.dss.next('moderate sign of depression')
   console.log("Moderate Sign of Depression")
  }
  else if(sumA>=80 && sumA<=100){


  this.dss.next('severe sign of depression')

  console.log("Severe Sign of Depression")
 }
 else{
  alert("Error!")
 }
 }
 }

on the component where you want to use the data in the ngOnInit or ngAfterViewInit doesn't matter. or if its on the same component still doesn't matter - if its a different component then you have to import the service and add it to the constructor of the new component if its the same component you've already imported it.

ngOnInit(){
this.dss.depressionData$.subscribe((depressiondata)=>{
this.depressionScale=depressiondata
})
}

on the html of the component

{{depressionScale}} or to see it as raw json {{depressionScale | json}}

to read about why and how it works:

https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

https://rxjs.dev/guide/subject

score 2 · Accepted Answer · answered Jul 18 '21 at 21:36

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.

How to pass data to another page in ionic-Angular

2 Answers2