Ionic retrieve data from firebase: select and display to another page

Ionic Framework
1

hi i would like to ask how can I get the category name out then show the description and image to another page? Currently I able to show the category name snapshot, but I not sure upon click the category name and go to next page to show the description.

image
image1404×331 20.6 KB

Above is my database with the fields ^^
the idea is to show the category on one page and upon click it will direct to next page to show the other fields.

This is category.page.html

<ion-content>
<ion-list>
  <ion-item *ngFor="let category of Categorys" lines="full">
    <ion-label>
      <strong>{{category.category}}</strong>
    </ion-label>
    </ion-item> 
    </ion-list>
</ion-content>

This is the category.page.ts

import { Component, OnInit } from '@angular/core';
import { CrudService } from '../services/crud.service';


export class ReadCategory {
  $key: string;
  category: string;
}

@Component({
  selector: 'app-learn',
  templateUrl: './category.page.html',
  styleUrls: ['./category.page.scss'],
})
export class CategoryPage implements OnInit {
  Categorys: ReadCategory[];

  constructor(private crudService: CrudService) { }

  ngOnInit() {
    this.crudService.getCategory().subscribe((res) => {
      this.Categorys = res.map((t) => {
        return {
          id: t.payload.doc.id,
          ...t.payload.doc.data() as ReadCategory
        };
      })
    });
  }

  todoList() {
    this.crudService.getCategory()
    .subscribe((data) => {
      console.log(data)
    })
  }
}

CRUD Services:

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Router } from '@angular/router';

export class ReadCategory {
  $key: string;
  category: string;
}
@Injectable({
  providedIn: 'root'
})
export class CrudService {

  constructor(
    private ngFirestore: AngularFirestore,
    private router: Router
  ) { }

  getCategory() {
    return this.ngFirestore.collection('learn').snapshotChanges();
  }
}

Any help appreciated! Thanks in advance!
result :

image
image490×770 5.21 KB

2

First of all add the click button with the element id as a parameter
(click)="go_page_next(category.id)

<ion-item *ngFor=“let category of Categorys” (click)=“go_page_next(category.id)” lines=“full”>

</ion-label>
</ion-item>
</ion-list>

Now in the next.ts page.
import the ActiveRoute and also your service to retrieve the data and check the retrieved id’s and the one transmitted as a parameter

this.crudService.get_category().subscribe(data=>{
this.tab_category =
data.map(datas=>{
if (this.activatedRoute.snapshot.params.id == datas.payload.doc.id) {
this.tab_category.push({
key : datas.payload.doc.id,
description : datas.payload.doc.data()[‘description’],
… : datas.payload.doc.data()[…],
})
}
})
})

don’t forget to modify your routing to allow you to pass parameters to your page
{
path: ‘suivant/:id’,
loadChildren: () => import(’./suivant/suivant.module’).then( m => m.SuivantPageModule)
},

3

i did include the click function to the ion item in category.page.html as you stated as that purpose for once user click it will direct to the function navigate to the description page.

<ion-content>

  <ion-list>

    <ion-item *ngFor="let category of Categorys" lines="full" click="go_page_next(category.id)">

      <ion-label>

        <strong>{{category.category}}</strong>

      </ion-label>

      </ion-item>

      </ion-list>

  </ion-content>

i didn’t got the part where (category.id) supposed to be? i’m sure in the category.page.ts supposed to be a navigation to the description page?

import { Component, OnInit } from '@angular/core';
import { CrudService } from '../services/crud.service';
import { Router } from '@angular/router';


export class ReadCategory {
  $key: string;
  category: string;
}

@Component({
  selector: 'app-learn',
  templateUrl: './category.page.html',
  styleUrls: ['./category.page.scss'],
})
export class CategoryPage implements OnInit {
  Categorys: ReadCategory[];

  constructor(private crudService: CrudService, private router: Router) { }

  ngOnInit() {
    this.crudService.getCategory().subscribe((res) => {
      this.Categorys = res.map((t) => {
        return {
          id: t.payload.doc.id,
          ...t.payload.doc.data() as ReadCategory
        };
      })
    });
  }

  todoList() {
    this.crudService.getCategory()
    .subscribe((data) => {
      console.log(data)
    })
  }
  go_page_next(category.id){
   //suppose to direct to the description page?
    this.router.navigate(['/description']);
}

this part i have difficulty in understanding. [next.ts] Appreciate if you could help me understand this part. From my understanding the id comparing data payload doc id which is the key? And push the description data.

this.crudService.get_category().subscribe(data=>{
this.tab_category = 
data.map(datas=>{
if (this.activatedRoute.snapshot.params.id == datas.payload.doc.id) {
this.tab_category.push({
key : datas.payload.doc.id,
description : datas.payload.doc.data()[‘description’],
… : datas.payload.doc.data()[…],
})
}
})
})

Any help will be appreciated! thank you!