title: How to make Listing from web API services using Angular 6
body: <p>I am new developper in Angular 6. When i make Listing for my project , the project gives thing like [object Object]  on my browser.I use another model for the city's info. Do you think what do i need to do ? you could answer on Angular 5 if you want. I can translate to Angular 5.Could you help me at this issu ? </p>
  
  <p>My json data is ;
  {
          "id": "",
          "name": "A bank",
          "address": "adres",
          "contactName": "Jack",
          "contactSurname": "Jones",
          "contactPhone": "+545014877",
          "status": true,
          "city": {
              "id": 40,
              "name": "İSTANBUL",
              "code": 34
          },
          "town": {
              "id": 459,
              "name": "Beyoglu",
              "city": {
                  "id": 40,
                  "name": "Istanbul",
                  "code": 34
              }
          }
      },</p>
  
  <ul>
  <li>My example output</li>
  </ul>
  
  <p>A bank  adres   Jack Yektan Jones +53789877 true [object Object]    [object Object]</p>
  
  <ul>
  <li><p>Model Bank</p>
  
  <pre><code>    export class Bank{
        id: string;
        name: string;
        address: string;
        contactName: string;
        contactSurname: string;
        contactPhone: string;
        secondContactPhone: string;
        bankLogo: any;
        town: Town;
        city: City;
      }
  </code></pre></li>
  <li><p>Model City</p>
  
  <pre><code>export class City extends ResponseError{
    id: number;
    name: string;
    code: number;
  }
  </code></pre></li>
  </ul>
  
  <p>-My Example Services</p>
  
  <pre><code>- My services
  
      import { Injectable } from '@angular/core';
      import { HttpClient/*,HttpHeaders */} from "@angular/common/http";
      import { Bank } from "../models/bank";
      import { Observable } from '../../node_modules/rxjs/Observable';
  
      @Injectable()
      export class BankService {
  
  
      constructor(private http:HttpClient) { }
  
      getContent(): Observable&lt;Bank[]&gt;{
          return this.http.get&lt;Bank[]&gt;('exampleurl');
      }
      }
  </code></pre>
  
  <p>- My Component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Bank } from '../models/bank';
  import { BankService } from './bank.service';
  
  @Component({
    selector: 'app-bank',
    templateUrl: './bank.component.html',
    styleUrls: ['./bank.component.css'],
    providers:[BankService]
  })
  export class BankComponent implements OnInit {
    title="Bank";
    bank:Bank[];
    constructor(private bankService:BankService) { }
  
    ngOnInit() {
      this.getContent();
    }
    getContent(){
      this.bankService.getContent().subscribe(res=&gt;{this.bank=res;});
    }
  }
  </code></pre>
  
  <p>-Html</p>
  
  <pre><code>   &lt;tr *ngFor='let bnk of bank;let i = index'&gt;
          &lt;th scope="row"&gt;{{ i+1 }}&lt;/th&gt;
          &lt;td&gt;{{bnk.name}}&lt;/td&gt;
          &lt;td&gt;{{bnk.address}}&lt;/td&gt;
          &lt;td&gt;{{bnk.contactName}}&lt;/td&gt;
          &lt;td&gt;{{bnk.contactSurname}}&lt;/td&gt;
          &lt;td&gt;{{bnk.contactPhone}}&lt;/td&gt;
          &lt;td&gt;{{bnk.secondContactPhone}}&lt;/td&gt;
          &lt;td&gt;{{bnk.status}}&lt;/td&gt;
          &lt;td&gt;{{bnk.bankLogo}}&lt;/td&gt;
          &lt;td&gt;{{bnk.town}}&lt;/td&gt;
          &lt;td&gt;{{bnk.city}}&lt;/td&gt;
        &lt;/tr&gt;
  </code></pre>