How to select list in ionic 4 from firebase and display it into another page

Ionic Framework Ionic Angular
1

I’m having an issue right now since I’m still a newbie here in ionic firebase’s world. I don’t really know how to pass a list selected from a page into another page. Can somebody help me?

here is my firebase.service

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import * as firebase from 'firebase/app';
import 'firebase/storage';
import { AngularFireAuth } from '@angular/fire/auth';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {

  constructor(
     public afs: AngularFirestore,
     public afAuth: AngularFireAuth) { 

    }
    getStudent(){
      return new Promise<any>((resolve, reject) => {
        this.afs.collection('/StudentList').snapshotChanges()
        .subscribe(snapshots => {
          resolve(snapshots)
        })
      })
    }
    getStudents(userKey){
      return new Promise<any>((resolve, reject) => {
      return this.afs.collection('/StudentList').doc(userKey).snapshotChanges()
      .subscribe(snapshots => {
        resolve(snapshots)
      })
    })
    }   

}

and here is my studlist.html where I want to select a list

<ion-item *ngFor="let sList of items">
 <ion-card  (click)="selectStud(sList)" >
  <br>
   <p  ion-text>Name : {{sList.payload.doc.data().name}}</p>
   <p ion-text >Matrix :{{sList.payload.doc.data().matrix}} </p>
   <p ion-text >Booth : {{sList.payload.doc.data().booth}}</p>
   <p ion-text >Not evaluated</p><br>
</ion-card></ion-item>

inside studlist.ts, this the function that will be select and pass into another page

selectStud(sList){
  this.navCtrl.navigateBack('/role');}
2

You can use router for passing value between two pages. Here is the demo you can use:

import { Router} from '@angular/router';
.....
....
constructor(public router: Router,) {
}
...
..
.
selectStud(sList){
  this.router.navigate(['/page'], {
         queryParams: {
           value: JSON.stringify(sList)
       }
   });
}

To recieve the passing value, use ActivatedRouter Object in page where you are passing the value:

import {ActivatedRoute} from '@angular/router';
....
...
variableToStoreValue: any = []; 
 constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe((res) => {
             this.variableToStoreValue = JSON.parse(res.value);
         });
}
3

To receive the list from firebase use your method like this:

mainuser: AngularFirestoreDocument;
   userPosts;
   sub: Subscription;
   posts;
....
constructor(private afs: AngularFirestore) {}
...
..
someFunctionToGetList() {
   this.mainuser = this.afs.doc(`postsbyCategories/${ this.selectedCategory }`);
       this.sub = this.mainuser.valueChanges().subscribe(event => {
           this.posts = event.posts;
           console.log(this.posts);
       });
}
4

I’m sorry but i’m kinda lost here value: JSON.stringify(value) the value is comin from where?

5

Sorry, that’s my mistake, I’mean sList object we are passing the function simple pass here: JSON.stringify(sList) . Hope you got the point.

6

What I would do instead is to have a service that tracks the currently selected student and exposes it as an Observable. The general idiom is described here. The strategy @Hammad6264 is proposing relies on serializing things into user-facing URLs, which I have found to be ugly and brittle. I would not recommend trying to pass any data through Angular’s router any more complex than URL-safe scalars.

1 Like
7

Hi girl
Nice meet you.
I have also same issue, so I want to know you if you are very similar to IONIC, React Native.
If you are Okay, Pls ping me here.

Best

8

I’m Sorry, I don’t have enough knowledge with react. I can help you with ionic and angular or JavaScript.

9

ah…
I see.

Are you expert in IONIC and JS ?

10

Hi Hammad
How are you ?
I have simple problem in IONIC,
Will be good if you can help me.

11

I am fine, thanks!
Let me know your issue so I can help?