Angular2 Customers module example

app.component.html

<ul>
    <li *ngFor="let customer of customersList">{{customer.name}}</li>    
</ul>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Customers } from './shared/customers.model'
import { CustomersService } from './shared/customers.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app works!';
  customersList: Customers[] = []

  constructor(private _customerService: CustomersService){ }

  ngOnInit(){
    this._customerService.getCustomers().then(customers => this.customersList = customers);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {CustomersService} from './shared/customers.service'

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [CustomersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

customers.model.js

// ng generate class shared/customers.model

export class Customers {
    name:string;
    city:string;
}

customers.service.ts

// ng generate service shared/customers

import { Injectable } from '@angular/core';
import { Customers } from './customers.model';

@Injectable()
export class CustomersService {

  constructor() { }

  getCustomers(): Promise<Customers[]>{
    return Promise.resolve(CUSTOMERS);
  }
}

const CUSTOMERS: Customers[] = [
  { city:"London", name:"Riccardo" },
  { city:"Manchester", name:"Ciccio" }
];