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

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.


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 :

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)
},