Loading/Navigating Pages Dynamically - Extending URL on click

I am creating a recipe app, I have different categories that I want to dynamically load on click. To pull recipes I have a url (http get request) which I want to extend with a string depending on what category i click on.

The base url would be

http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=/////

On the end I would want to add either one of these.

396^Dairy-Free , 393^Gluten-Free , 391^Nut-Free , 393^Wheat-Free, and so on. Could someone please give me an idea on how to implement this

My HTML currently is

<ion-item [navPush] = "listingPage" detail-push>
      <img src="http://placehold.it/500x500">
      <h1>Glueten Free</h1>
    </ion-item>
    <ion-item>
      <img src="http://placehold.it/500x500">
      <h1>Category 2</h1>
    </ion-item>
    <ion-item>
      <img src="http://placehold.it/500x500">
      <h1>Category 3</h1>
    </ion-item>
    <ion-item>
      <img src="http://placehold.it/500x500">
      <h1>Category 4</h1>
    </ion-item>

and HTTP request is

this.http.get('http://api.yummly.com/v1/api/recipes?_app_id=////&_app_key=//////')
  .map(res => res.json())
  .subscribe(data => {
    // we've got back the raw data, now generate the core schedule data
    // and save the data for later reference
    console.log(data);
    this.listing = data.matches;
    resolve(this.listing);
  });
  });

Currently I only have 1 url loading on a page, but I want this to change depending on what category selected. Many thanks