diff --git a/app/app.component.html b/app/app.component.html
index 1cc53e6..e5fc017 100644
--- a/app/app.component.html
+++ b/app/app.component.html
@@ -1,14 +1,5 @@
 <h1>Hello!</h1>
-<div *ngIf="selectedDuck">
-    <div>
-        <label>id:</label>
-        {{ selectedDuck.id }}
-    </div>
-    <div>
-        <label>color:</label>
-        <input [(ngModel)]="selectedDuck.color" placeholder="Color">
-    </div>
-</div>
+<duck-detail [duck]="selectedDuck"></duck-detail>
 
 <ul>
     <li *ngFor="let duck of ducks" (click)="onSelect(duck)">
diff --git a/app/app.module.ts b/app/app.module.ts
index be11127..8d84997 100644
--- a/app/app.module.ts
+++ b/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 {}
diff --git a/app/duck-detail.component.html b/app/duck-detail.component.html
new file mode 100644
index 0000000..2c5e6e6
--- /dev/null
+++ b/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>
diff --git a/app/duck-detail.component.ts b/app/duck-detail.component.ts
new file mode 100644
index 0000000..115b497
--- /dev/null
+++ b/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;
+}