title: Passing Data between pages from url
body: <p>I am working on ionic 4 project. My project is getting data json from url using input search . l want passing data when users is click on any items to show them another page for more details . l tried with this code but l get undefined value ! </p>
  
  <p>this code is holding search operation </p>
  
  <pre><code>export class FlightsearchPage {
    public search = ''
    public flight : any
    filterItems:any;
    callsign : any;
    constructor(private http: HTTP, public loadingController: LoadingController, private nav : NavController) {
  
      this.addThemFunction
    }
  
    keyPressed(event: any) { /
      console.log(event.target.value); 
    this.addThemFunction(event.target.value);
    }
  
   async addThemFunction(search){
  
    this.http.get('/web/find?query='+search+'', {}, {})
    .then(data =&gt; {
  
      const parsed = JSON.parse(data.data);
      this.flight = parsed.results;
      this.filterItems= this.flight;
      this.callsign = this.flight.detail.flight
  
      /// here l am try to pass value callsign to page details /// 
  
      this.nav.navigateForward(`/flightserachdetails/${this.callsign}`)
  
      }), err=&gt;{
      }
    }
  
  
      }
  </code></pre>
  
  <p>details search </p>
  
  <pre><code> &lt;ion-content padding&gt;
        &lt;ion-item&gt;
            &lt;ion-label position="floating"&gt;Enter your flight number&lt;/ion-label&gt;
            &lt;ion-input [(ngModel)]="search" (keyup)="keyPressed($event)" placeholder="Ex : iaw556"&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
  
    &lt;ion-item *ngFor="let item of flight"  routerDirection="forward"&gt;
        &lt;ion-label&gt;
          &lt;ion-text color="primary"&gt;
              &lt;h3 [routerLink]="['/flightserachdetails', id]"&gt;{{item.label}}&lt;/h3&gt;
            &lt;/ion-text&gt;
            &lt;p&gt;{{item.name}}&lt;/p&gt;
        &lt;/ion-label&gt;
      &lt;/ion-item&gt;
  
  &lt;/ion-content&gt; 
  </code></pre>
  
  <p>this code is getting data from code above </p>
  
  <pre><code>export class FlightserachdetailsPage {
  
    public flight : any
    callsignId = null
  
    constructor(private http: HTTP, public loadingController: LoadingController, private nav: NavController,private activatedRoute: ActivatedRoute) {
  
  
      this.callsignId = this.activatedRoute.snapshot.paramMap.get('id')           
  
  
  
  
  
  }
  </code></pre>
  
  <p>for display data from another page above. </p>
  
  <pre><code>&lt;ion-content padding&gt;
     {{callsignId}}
     {{flight.request.fetchBy}}
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>json response </p>
  
  <pre><code>{
    "results": [
      {
        "id": "IA107",
        "label": "IA107",
        "detail": {
          "callsign": "IAW107",
          "flight": "IA107", 
         "fetchBy": "IA107"
        },
        "type": "schedule",
      }
    ]
  }
  </code></pre>
  
  <p>l am sorry about mess code. any suggestion or give me another code example, please?  </p>