Add headers to ionic 2 provider

Hi All,

Iv been looking at ways to access APIs and i have been following this tutorial:

My question is how to you add headers to the API Call? As i need to add two headers to it app-id and app-key as headers.


try something like this

import {Injectable} from ‘@angular/core’;
import {Http, Headers} from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

export class Users {

userID:string = "TVRnNU1qWXpNREk9Ky06TWc9PQ==";

constructor(private http:Http) {

login(email, pass) {
    let body = JSON.stringify({"userID": this.userID, "email": email, "pass": pass});
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return new Promise(resolve => {'', body, {headers: headers})
            .map(response => response.json())
                response => {
                    if (response) {
                    } else {
                }, error => {


1 Like

This is what i have so far…


import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

export class EpisodeService {
  data: any;

  constructor(private http: Http) { = null;

  load() {
    if ( {
      // already loaded data
      return Promise.resolve(;
    // don't have the data yet
    let body = JSON.stringify({});
    let headers = new Headers();
    headers.append('app-id', '');
    headers.append('app-key', '');
    headers.append('Content-Type', 'application/json');

    return new Promise(resolve => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.'', body, {headers: headers})
        .map(res => res.json())
        .subscribe(data => {
 = data.episodes;
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          // = data;

Removed keys for security reasons

However on the page it should display on i get a blank page


import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EpisodeService } from '../../providers/episode-service/episode-service';

  templateUrl: 'build/pages/latest/latest.html',
  providers: [EpisodeService]
export class LatestPage {
    public people: any;

  constructor(public episodeService: EpisodeService){

    .then(data => {
      this.people = data;


<ion-navbar *navbar primary>
   <ion-title><img src="images/header.png" class="header"/></ion-title>

<ion-content padding class="latest">
    <ion-item *ngFor="#person of people">

Hi, do you solve the question?
I trying do this too.