Change the duck to a list of ducks, finalize editor

Signed-off-by: Gergely Polonkai <gergely@polonkai.eu>
This commit is contained in:
Gergely Polonkai 2016-09-06 14:07:33 +02:00
parent 09ea2073dd
commit f7bf483aa7
2 changed files with 23 additions and 4 deletions

View File

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

View File

@ -2,11 +2,25 @@ import { Component } from "@angular/core";
import { Duck } from "./models"; import { Duck } from "./models";
const DUCKS: Ducks[] = [
{ id: 1, color: 'yellow' },
{ id: 2, color: 'blue' },
{ id: 3, color: 'pink' }
]
@Component({ @Component({
selector: "duckbook-front", selector: "duckbook-front",
templateUrl: "/app/app.component.html" templateUrl: "/app/app.component.html"
}) })
export class AppComponent { export class AppComponent {
ducks = DUCKS;
selectedDuck: Duck;
onSelect(duck: Duck): void {
console.log(duck);
this.selectedDuck = duck;
}
duck: Duck = { duck: Duck = {
id: 1, id: 1,
color: 'yellow' color: 'yellow'