Initial commit

src/app/customer-list/customer-list.component.css

@@ -0,0 +1,8 @@
+h1 {
+  color: navy;
+}
+
+.selected {
+  color: purple;
+  font-weight: bold;
+}

src/app/customer-list/customer-list.component.html

@@ -0,0 +1,9 @@
+<h1>Customers</h1>
+<p><i>select a customer</i></p>
+<ul>
+  <li *ngFor="let cust of customers" [ngClass]="{selected: customer===cust}" (click)="customer=cust">{{cust.name}}</li>
+</ul>
+<!--*ngIf Structural Directive show div if no customer is selected-->
+<div *ngIf="customer">
+  <app-customer-detail [customer]="customer" (shift)="shift($event)"></app-customer-detail>
+</div>

src/app/customer-list/customer-list.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Customer } from 'app/customer.model';
+import { DataService } from 'app/data.service';
+import { LoggerService } from 'app/logger.service';
+
+@Component({
+  selector: 'app-customer-list',
+  templateUrl: './customer-list.component.html',
+  styleUrls: ['./customer-list.component.css']
+})
+export class CustomerListComponent implements OnInit {
+  customers: Customer[];
+  customer: Customer;
+
+  constructor(private dataService: DataService, private loggerService: LoggerService) { }
+
+  ngOnInit() {
+    this.loggerService.log('Getting customers');
+    this.customers = this.dataService.getCustomers();
+  }
+
+  shift(increment: number) {
+    let ix = this.customers.findIndex(c => c === this.customer) + increment;
+    ix = Math.min(this.customers.length - 1, Math.max(0, ix));
+    this.customer = this.customers[ix];
+  }
+}