Change the duck to a list of ducks, finalize editor
Signed-off-by: Gergely Polonkai <gergely@polonkai.eu>
This commit is contained in:
parent
09ea2073dd
commit
f7bf483aa7
@ -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>
|
||||
|
@ -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'
|
||||
|
Loading…
Reference in New Issue
Block a user