Converting on click event to a router

Question

I have the below codes in a old ionic 3, currently I have to migrate to ionic 5. I have googled it, but still find it confusing.

In my Html

(click)="onAllergiesDetailsClicked(medicalAlertGroup , 'Medical Alert')"

In my TS file

onAllergiesDetailsClicked(allergiesGroupLists, pageTitle) {
  this.navCtrl.push(AllergiesGroupListPage, { allergiesGroupList: allergiesGroupLists, pageTitle: pageTitle });
}

In my ts in AllerhiesGroupList Page

let allergiesGroupList: PatientAllergiesGroup = this.navParams.get('allergiesGroupList');
this.pageTitle = this.navParams.get('pageTitle');
this.patientAllergiesLists = (allergiesGroupList.patientAllertList.sort(this.sortingDate));

Answer 1

First of all create a service named data:

export class dataService {
setvalue:any;
constructor(){}
setDestValue(param){
     this.setvalue = param;
}

getDestValue(){
    return this.setvalue;
}
}

Second thing in your page you need to send data from:

import { Router } from '@angular/router';
import {DataService} from 'put service path here';
constructor(private dataService:DataService,private router:Router...)

onAllergiesDetailsClicked(allergiesGroupLists, pageTitle){ 
    this.dataService.setDestValue({ allergiesGroupList: allergiesGroupLists, pageTitle: pageTitle });
    this.router.navigate(["name of page to navigate to as it is named in app-routing"]);
}

And in the page its routed to:

import {DataService} from 'put service path here';

constructor(private dataService:DataService...){
    let data = this.dataService.getDestValue();
    this.pagetitle = data.pageTitle;
    this.grouplist = data.allergiesGroupList;
}

Thats all .