Move Duck detail/editor to a separate component
Signed-off-by: Gergely Polonkai <gergely@polonkai.eu>
This commit is contained in:
parent
f7bf483aa7
commit
06af47fccf
@ -1,14 +1,5 @@
|
||||
<h1>Hello!</h1>
|
||||
<div *ngIf="selectedDuck">
|
||||
<div>
|
||||
<label>id:</label>
|
||||
{{ selectedDuck.id }}
|
||||
</div>
|
||||
<div>
|
||||
<label>color:</label>
|
||||
<input [(ngModel)]="selectedDuck.color" placeholder="Color">
|
||||
</div>
|
||||
</div>
|
||||
<duck-detail [duck]="selectedDuck"></duck-detail>
|
||||
|
||||
<ul>
|
||||
<li *ngFor="let duck of ducks" (click)="onSelect(duck)">
|
||||
|
@ -3,13 +3,17 @@ import { BrowserModule } from "@angular/platform-browser";
|
||||
import { FormsModule } from "@angular/forms";
|
||||
|
||||
import { AppComponent } from "./app.component";
|
||||
import { DuckDetailComponent } from "./duck-detail.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule
|
||||
],
|
||||
declarations: [ AppComponent ],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
DuckDetailComponent
|
||||
],
|
||||
bootstrap: [ AppComponent ]
|
||||
})
|
||||
export class AppModule {}
|
||||
|
10
app/duck-detail.component.html
Normal file
10
app/duck-detail.component.html
Normal 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>
|
12
app/duck-detail.component.ts
Normal file
12
app/duck-detail.component.ts
Normal 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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user