[Solved] Rest api calling in Ionic v2

Ionic v2 starter: https://github.com/nhancv1992/hello-ionic2

"dependencies": {
"angular2": "2.0.0-beta.6",
"es6-promise": "3.0.2",
"es6-shim": "0.33.13",
"ionic-angular": "2.0.0-beta.3",
"ionic-native": "^1.1.0",
"ionicons": "3.0.0-alpha.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.14"
},

In hello-ionic.js

import {Page, NavController} from 'ionic-angular';
import {Http, Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

@Page({
templateUrl: 'build/pages/hello-ionic/hello-ionic.html'
})
export class HelloIonicPage {

static get parameters() {
return [[NavController], [Http]];
}

constructor(nav, http) {
this.nav = nav;
this.http = http;
}

getMe() {
console.log("getMe");
var authHeader = new Headers();
authHeader.append('Authorization', 'Basic ' + btoa("admin:District1"));

this.http.get('https://play.dhis2.org/demo/api/me', {
headers: authHeader
})
.map(res => {
console.log(res);
return res.statusText;
})
.subscribe(
data => {
console.log(data);
}, err => {
console.log(err);
},
() => {
console.log('Secret Quote Complete')
}
);
}
}

In hello-ionic.html

<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>


<ion-content padding class="getting-started">

<h3>Welcome to your first Ionic app!</h3>

<p>
<button primary menuToggle>Toggle Menu</button>
<button block (click)="getMe()">Get me</button>
</p>

</ion-content>

Result:

Show your support

Clapping shows how much you appreciated Nhan Cao’s story.