My Home.html is
<ion-header>
<ion-navbar>
<ion-title>
My Favourite Technologies
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-item>
<button class="add" ion-button item-right icon-right margin-bottom color="primary"(click)="addEntry()">
Add a technology
<ion-icon name="add"></ion-icon>
</button>
</ion-item>
<ion-item *ngFor="let item of items">
<h2>{{ item.name }} </h2>
<button ion-button color="primary" item-right (click)="viewEntry({ record: item })">View</button>
</ion-item>
</ion-content>
Home.ts
import { AddTechnologyPage } from './../add-technology/add-technology';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
public items : any = [];
constructor(public navCtrl: NavController, public http: Http) {
}
ionViewWillEnter() {
this.load();
}
// Retrieve the JSON encoded data from the remote server
// Using Angular's Http class and an Observable - then
// assign this to the items array for rendering to the HTML template
load() {
this.http.get('http://localhost:8080/ionic/retrieve-data.php').map(res => res.json()).subscribe(data => {
this.items = data;
});
}
// Allow navigation to the AddTechnology page for creating a new entry
addEntry() {
this.navCtrl.push(AddTechnologyPage);
}
// Allow navigation to the AddTechnology page for amending an existing entry
// (We supply the actual record to be amended, as this method's parameter,
// to the AddTechnology page
viewEntry(param) {
this.navCtrl.push(AddTechnologyPage, param);
}
}