...
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.
Info |
---|
|
What's really cool about this is the way in the which the two-way bind [property]="other property" works. If you change something in either parent or child, it is immediately reflected in the counter property. |