How to pass a data together with a router Link in HTML?

Question

I'm trying to a pass data together with a router Link in HTML. I have search all over google still unable to a find an answer. I even tried to store the data in a service, but it can't store the data.

Below is the HTML code, I want to pass the data outpatientRegdList?.prn together with the routherlink.

<div class="pandora-box" *ngFor="let outpatientRegdList of outpatientRegdList">
   <div *ngIf="outpatientRegdList?.sexCode ==='F' || outpatientRegdList?.sexCode ==='f'">
      <ion-row class="pandora-wisdom" routerLink="outpatient-settings">
        <ion-col class="pandora-joy">
           {{ outpatientRegdList?.prn     }}<br>
           <strong>{{outpatientRegdList?.title}} {{outpatientRegdList?.firstName}}
                  {{outpatientRegdList?.middleName}} {{outpatientRegdList?.lastName}}</strong><br>             
        </ion-col>
      </ion-row>
   <div>
</div>

Hope that some one would help me in this.

Answer 1

You can send data in the url via queryParams like this

<div *ngIf="outpatientRegdList?.sexCode ==='F' || outpatientRegdList?.sexCode ==='f'">
      <ion-row class="pandora-wisdom" routerLink="outpatient-settings" [queryParams]="{ yourQueryFieldName: outpatientRegdList?.prn }">
        <ion-col class="pandora-joy">
           {{ outpatientRegdList?.prn     }}<br>
           <strong>{{outpatientRegdList?.title}} {{outpatientRegdList?.firstName}}
                  {{outpatientRegdList?.middleName}} {{outpatientRegdList?.lastName}}</strong><br>             
        </ion-col>
      </ion-row>
   <div>

After navigation you can access the queryParams in the page with the ActivatedRoute

 constructor(private route: ActivatedRoute) { }
 ngOnInit() {
    this.route.queryParams
      .filter(params => params.yourQueryFieldName)
      .subscribe(params => {
        console.log(params); // {yourQueryFieldName: outpatientRegdList?.prn}
      });
  }