title: Loading/Navigating Pages Dynamically (Ionic 2 + Angular 2)
body: <p>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.</p>
  
  <p>The base url would be </p>
  
  <p><code>http://api.yummly.com/v1/api/recipes?_app_id=/////&amp;_app_key=/////</code></p>
  
  <p>On the end I would want to add either one of these.</p>
  
  <p><code>396^Dairy-Free</code>
  <code>393^Gluten-Free</code>
  <code>391^Nut-Free</code>
  <code>393^Wheat-Free</code> and so on. Could someone please give me an idea on how to implement this</p>
  
  <p>My HTML currently is </p>
  
  <pre><code>&lt;ion-item [navPush] = "listingPage" detail-push&gt;
        &lt;img src="http://placehold.it/500x500"&gt;
        &lt;h1&gt;Glueten Free&lt;/h1&gt;
      &lt;/ion-item&gt;
      &lt;ion-item&gt;
        &lt;img src="http://placehold.it/500x500"&gt;
        &lt;h1&gt;Category 2&lt;/h1&gt;
      &lt;/ion-item&gt;
      &lt;ion-item&gt;
        &lt;img src="http://placehold.it/500x500"&gt;
        &lt;h1&gt;Category 3&lt;/h1&gt;
      &lt;/ion-item&gt;
      &lt;ion-item&gt;
        &lt;img src="http://placehold.it/500x500"&gt;
        &lt;h1&gt;Category 4&lt;/h1&gt;
      &lt;/ion-item&gt;
  </code></pre>
  
  <p>and HTTP request is </p>
  
  <pre><code>    this.http.get('http://api.yummly.com/v1/api/recipes?_app_id=////&amp;_app_key=//////')
        .map(res =&gt; res.json())
        .subscribe(data =&gt; {
          // 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);
        });
    });
  </code></pre>
  
  <p>Currently I only have 1 url loading on a page, but I want this to change depending on what category selected. Many thanks</p>