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

View File

@ -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'