...
| Code Block |
|---|
| language | js |
|---|
| title | hero-detail.component.ts |
|---|
| linenumbers | true |
|---|
|
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero'
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit
{
@Input()
pickedHero: Hero;
constructor() { }
ngOnInit() {
}
}
|
Notice the import of the decorator at line 1, and it's use at line 11.
| Code Block |
|---|
| language | xml |
|---|
| title | hero-details.component.html |
|---|
| linenumbers | true |
|---|
|
<div *ngIf="pickedHero">
<h2>{{pickedHero.nme | uppercase}} Details</h2>
<div><span>id: </span>{{pickedHero.id}}</div>
<div>
<label>name:
<input [(ngModel)]="pickedHero.name" placeholder="name">
</label>
</div>
</div> |
Notice the property name pickedHero ties to the property in the class at line 12.