I study Angular 2.For example component needs a user argument to render information about that user:
<user-profile [user]="currentUser"></user-profile>
I want to use this component in more than one place/ how to do isolated binding in component 'user-profile'?
Update For example i use component
@Component({
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
})
and i pass data in component
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
changing hero.name makes the changes and selectHero.
how to avoid it?I want to selectHero not changed
@Input
bindingselectHero
yourself before you bind to it. Angular2 doesn't implicitly clone. What you want only works for primitives likenumber
,string
,boolean
by default.=
or<
binding would behave the same way. What would be the point of such a component if it dd not modify the hero passed as input. What should it do instead?