title: How to show on HTML the result from HTTP get angular
body: <p>I'm trying to show the result from a Http.get() on my HTML, but it only shows when I have an error, I mean, if I get a 404 not found, it will print only a message on my HTML, but now that I do not have a 404 I have a response, I'd like to know how to print it using HTML. I'll explain the structure of my project...</p>
  
  <p>I have a folder called provider where I have the list-service.ts, it contains the get...</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers } from '@angular/http';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/toPromise';
  
  @Injectable()
  export class ListServiceProvider {
      private headers = new Headers({'Content-Type': 'application/json'});
      private apiUrl = ""; // URL to web api
  
    constructor(public http: Http) {
      console.log('Hello I'm the ListServiceProvider Provider');
    }
  
    getList(): Promise&lt;List[]&gt; {
      return this.http.get(this.apiUrl+'list/')
                 .toPromise()
                 .then(response =&gt; response.json().data as List[])
                 .catch(this.handleErrorPromise);
    }
  
     //if an error ocurred while doing api calls 
    private handleErrorPromise (error: Response | any) {
    console.error(error.message || error);
    return Promise.reject(error.message || error);
      }
  
  }
  </code></pre>
  
  <p>Now I've created a class on app folder (don't know if it's the best way to place it...) called List</p>
  
  <pre><code>export class List{
      name: string;
      surname: string;
      phoneNumber: any;
      imageURL: string;
      email: string;
  
      constructor(name: string,
      surname: string,phoneNumber: any,
      imageURL: string,
      email: string){
          this.name = name;
          this.surname = surname;
          this.phoneNumber = phoneNumber;
          this.imageURL = imageURL;
          this.email = email;
  
      }
  }
  </code></pre>
  
  <p>And now I have a List-list.ts file where I do the calls and save the objects as follows </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { IonicPage, NavController, NavParams } from 'ionic-angular';
  
  import { List} from '../../app/list';
  
  @IonicPage()
  @Component({
    selector: 'page-list-list',
    templateUrl: 'list-list.html'
  })
  export class listListPage implements OnInit{
     promiseList: Promise&lt;List[]&gt;
     mList: List[];
     errorMessage: String;
  
  
    constructor(
      public navCtrl: NavController, 
      public navParams: NavParams,
      private listServiceProvider: ListServiceProvider
      ){}  
  
    ngOnInit(): void {
    this.promiseList= this.listServiceProvider.getList();
    this.promiseList.then(
             list=&gt; this.mList= list,
             error =&gt;  this.errorMessage = &lt;any&gt;error);
  
  
     }
  
  }
  </code></pre>
  
  <p>And finally on my HTML I have this...</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let list of promiseList | async"&gt;
          Name: {{list.name}}, Surname: {{list.surname}}
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div *ngIf="errorMessage"&gt;
      &lt;ion-card&gt;
          &lt;ion-item&gt;
              &lt;h2&gt;There's an error&lt;/h2&gt;
          &lt;/ion-item&gt;
      &lt;/ion-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I got a 404 error it shows the <code>div</code> but if I get a response from my API it didn't show the name and surname from list... What I'm missing?</p>