Move Duck detail/editor to a separate component

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

app/app.component.html

@@ -1,14 +1,5 @@
 <h1>Hello!</h1>
-<div *ngIf="selectedDuck">
+<duck-detail [duck]="selectedDuck"></duck-detail>
-    <div>
-        <label>id:</label>
-        {{ selectedDuck.id }}
-    </div>
-    <div>
-        <label>color:</label>
-        <input [(ngModel)]="selectedDuck.color" placeholder="Color">
-    </div>
-</div>
 
 <ul>
     <li *ngFor="let duck of ducks" (click)="onSelect(duck)">

app/app.module.ts

@@ -3,13 +3,17 @@ import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 
 import { AppComponent } from "./app.component";
+import { DuckDetailComponent } from "./duck-detail.component";
 
 @NgModule({
     imports: [
         BrowserModule,
         FormsModule
     ],
-    declarations: [ AppComponent ],
+    declarations: [
+        AppComponent,
+        DuckDetailComponent
+    ],
     bootstrap: [ AppComponent ]
 })
 export class AppModule {}

app/duck-detail.component.html

@@ -0,0 +1,10 @@
+<div *ngIf="duck">
+    <div>
+        <label>id:</label>
+        {{ duck.id }}
+    </div>
+    <div>
+        <label>color:</label>
+        <input [(ngModel)]="duck.color" placeholder="Color">
+    </div>
+</div>

app/duck-detail.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from "@angular/core";
+
+import { Duck } from "./models";
+
+@Component({
+    selector: "duck-detail",
+    templateUrl: "/app/duck-detail.component.html"
+})
+export class DuckDetailComponent {
+    @Input()
+    duck: Duck;
+}