diff --git a/app/app.component.html b/app/app.component.html
index 07375e7..1cc53e6 100644
--- a/app/app.component.html
+++ b/app/app.component.html
@@ -1,12 +1,17 @@
 <h1>Hello!</h1>
-<div>
+<div *ngIf="selectedDuck">
     <div>
         <label>id:</label>
-        {{ duck.id }}
+        {{ selectedDuck.id }}
     </div>
     <div>
         <label>color:</label>
-        <input [(ngModel)]="duck.color" placeholder="Color">
+        <input [(ngModel)]="selectedDuck.color" placeholder="Color">
     </div>
 </div>
-{{ duck.color }}
+
+<ul>
+    <li *ngFor="let duck of ducks" (click)="onSelect(duck)">
+        {{ duck.color }}
+    </li>
+</ul>
diff --git a/app/app.component.ts b/app/app.component.ts
index 367d117..2f6eeef 100644
--- a/app/app.component.ts
+++ b/app/app.component.ts
@@ -2,11 +2,25 @@ import { Component } from "@angular/core";
 
 import { Duck } from "./models";
 
+const DUCKS: Ducks[] = [
+    { id: 1, color: 'yellow' },
+    { id: 2, color: 'blue' },
+    { id: 3, color: 'pink' }
+]
+
 @Component({
     selector: "duckbook-front",
     templateUrl: "/app/app.component.html"
 })
 export class AppComponent {
+    ducks = DUCKS;
+    selectedDuck: Duck;
+
+    onSelect(duck: Duck): void {
+        console.log(duck);
+        this.selectedDuck = duck;
+    }
+
     duck: Duck = {
         id: 1,
         color: 'yellow'