Dynamically loading pages with parameters (Ionic 2 + Angular 2) - http

Question

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. I understand that this can be done with parameters but I do not understand how this works as I am new to angular and Ionic.
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

Answer 1

You have to pass the category id when the user will select the category and then call the function and pass the category id to that function. In that function, call the http method and you can use the category id in the URL.
<button click="getData(this.value)"></button>
In ts.file
getData(cat_id : any){
......
you can use cat_id here in URL and call http method
......
}