Outline the duck editor

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

app/app.component.html

@@ -1 +1,12 @@
 <h1>Hello!</h1>
+<div>
+    <div>
+        <label>id:</label>
+        {{ duck.id }}
+    </div>
+    <div>
+        <label>color:</label>
+        <input [(ngModel)]="duck.color" placeholder="Color">
+    </div>
+</div>
+{{ duck.color }}

app/app.component.ts

@@ -1,7 +1,14 @@
 import { Component } from "@angular/core";
 
+import { Duck } from "./models";
+
 @Component({
     selector: "duckbook-front",
     templateUrl: "/app/app.component.html"
 })
-export class AppComponent {}
+export class AppComponent {
+    duck: Duck = {
+        id: 1,
+        color: 'yellow'
+    };
+}

app/app.module.ts

@@ -1,10 +1,14 @@
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
+import { FormsModule } from "@angular/forms";
 
 import { AppComponent } from "./app.component";
 
 @NgModule({
-    imports: [ BrowserModule ],
+    imports: [
+        BrowserModule,
+        FormsModule
+    ],
     declarations: [ AppComponent ],
     bootstrap: [ AppComponent ]
 })

app/models.ts

@@ -0,0 +1,4 @@
+export class Duck {
+    id: number;
+    color: string;
+}