Move Duck detail/editor to a separate component

Signed-off-by: Gergely Polonkai <gergely@polonkai.eu>
This commit is contained in:
Gergely Polonkai 2016-09-06 14:21:25 +02:00
parent f7bf483aa7
commit 06af47fccf
4 changed files with 28 additions and 11 deletions

View File

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

View File

@ -3,13 +3,17 @@ import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms"; import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component"; import { AppComponent } from "./app.component";
import { DuckDetailComponent } from "./duck-detail.component";
@NgModule({ @NgModule({
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule FormsModule
], ],
declarations: [ AppComponent ], declarations: [
AppComponent,
DuckDetailComponent
],
bootstrap: [ AppComponent ] bootstrap: [ AppComponent ]
}) })
export class AppModule {} export class AppModule {}

View File

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

View File

@ -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;
}