So I have a listing page which lists out recipes in certain categories which the html is (this is just a normal http get request which pulls from a provider)
<ion-content>
<ion-list>
<ion-item *ngFor="let item of api" [navPush] = "detailsPage">
<div class="thumb">
<img src="{{item.smallImageUrls}}">
</div>
<div class="text">
<div class="inner">
<div class="title">
<h1>{{item.recipeName}}</h1>
</div>
<div class="rating">
<rating [(ngModel)]="item.rating"></rating>
</div>
<div class="time">
<p>{{item.totalTimeInSeconds | HoursMinutesSeconds}} minutes</p>
</div>
<div class="ingredients">
<p>{{item.ingredients.length}} Ingredients</p>
</div>
<div class="course">
<p>{{item.attributes.course}} </p>
</div>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
and .ts file is
export class Category1Page {
private rate = 2.5;
public api: any;
detailsPage = DetailsPage;
constructor(public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication) {
this.loadRecipes();
}
loadRecipes(){
this.apiAuthentication.loadCategory1()
.then(data => {
this.api = data;
});
}
}
I then has a details page which is the recipe in its singular form (listing out ingredients, method… etc) which I currently test with a single recipe until this issue is solved.
html is
<ion-content>
<ion-list>
<ion-item>
<div class="thumb">
<img src="{{api?.images[0].hostedLargeUrl}}">
<h1>{{api?.name}}</h1>
</div>
<div class="action-bar">
<div class="like" (click)="toggle()">
<ion-icon *ngIf="!visible" name="ios-heart-outline"></ion-icon>
<ion-icon *ngIf="visible" name="ios-heart"></ion-icon>
<span>Like</span>
<span class="count">{{counter}}</span>
</div>
<div class="time">
<ion-icon name="ios-time-outline"></ion-icon>
<span>{{api?.totalTime}}</span>
</div>
<div class="share">
<ion-icon name="share"></ion-icon>
<span>Share</span>
</div>
</div>
<div class="ingredients">
<h1>Ingredients</h1>
<div class="shopping-list">
<ion-icon name="ios-cart"></ion-icon>
<h1>Add to shopping list</h1>
</div>
<ul>
<li *ngFor="let item of api?.ingredientLines">{{item}}</li>
</ul>
</div>
<div class="method">
<h1>View Method</h1>
<button class="button button-block button-positive" (click)="launch(api?.source.sourceRecipeUrl)">Click to see cooking steps!
</button>
</div>
<div class="reviews">
<h1>Reviews</h1>
</div>
<div class="related">
<h1>Related</h1>
</div>
<div class="map">
<h1>Nearest Supermarket</h1>
</div>
</ion-item>
</ion-list>
</ion-content>
and .ts file is
export class DetailsPage {
private rate = 2.5;
public api: any;
public cordova: any;
visible = false;
id: any;
public counter : number = 0;
constructor(public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication, private platform: Platform) {
this.loadRecipes();
}
toggle() {
this.visible = !this.visible;
if (!this.visible) {
this.counter -= 1;
} else {
this.counter += 1
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad DetailsPage');
}
launch(url) {
this.platform.ready().then(() => {
// cordova.InAppBrowser.open(url, "_system", "location=true");
});
}
loadRecipes(){
this.apiAuthentication.loadDetails(this.id)
.then(data => {
this.api = data;
});
}
}
That is all my code in relation to this pretty much, obviously the url im trying to get is the one I asked in the initial question.
Thankyou for the help 