Change the duck to a list of ducks, finalize editor

Signed-off-by: Gergely Polonkai <gergely@polonkai.eu>

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>
+
+<ul>
+    <li *ngFor="let duck of ducks" (click)="onSelect(duck)">
         {{ duck.color }}
+    </li>
+</ul>

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'