javascriptionic-frameworkhyperlinkrouterlink

Pass value to an other compoment via routerLink in Ionic


I would like to pass value to another compoment ex: a name of country, and use it on the other compoment

I make the link like that and i want to send the value "France" to another compoment (via dataHere) :

  <ion-card-header>
    <ion-img class="logo-flag-greece" alt="mylogo" ></ion-img>
    <span routerLink="/tabs/result" dataHere="France" class="text">France</span>

  </ion-card-header>

How can i do that ?


Solution

  • in you html file

    <ion-card-header>
        <ion-img class="logo-flag-greece" alt="mylogo" ></ion-img>
        <span (click)="show_result()" dataHere="France" class="text">France</span>
      </ion-card-header>
    

    and in your ts file
     import {Router} from "@angular/router";
      ...
      ...
      constructor(private router:Router){}
    
    show_result(){
    this.router.navigate(["/tabs/result"],{
      queryParams: {
        data: your_data
      }
    }); 
    }
    

    and in your result.page.ts file

     import {ActivatedRoute} from "@angular/router";
       ...
       ...
       constructor(private activatedRoute:ActivatedRoute){}
    ionViewDidEnter(){
    this.activatedRoute.queryParams.subscribe(params => {
        this.country_data = params['data'];
      });
    
    }
    

    But I don't recommend this work around. Instead use "service". Your can pass data from one page to another this way. Learn more about service in https://edupala.com/ionic-service/