Reputation: 2309
I'm following the tutorial here: https://angular.io/docs/dart/latest/tutorial/toh-pt3.html
So I thought it would be possible to bind multiple targets:
app-component.dart
<my-hero-detail [hero]="selectedHero" [msg]="123"></my-hero-detail>
hero_detail_component.dart
@Component(
selector: 'my-hero-detail',
template: '''
<div *ngIf="hero != null">
<h2>{{msg}} {{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>'''
)
class HeroDetailComponent {
@Input()
Hero hero;
@Input()
String msg;
}
So I noticed something obviously wrong. Angular needs to distinguish between a property of the AppComponent
(selectedHero
in this case) and realize that 123
is not a variable, but a value I want to assign to msg
property.
So the question is --- how can we pass a value to HeroDetailComponent
?
Upvotes: 2
Views: 2432
Reputation: 50643
If I understood you correctly, you want to assign value 123
to msg
property, not value of variable named 123
. There are two ways to do this:
<my-hero-detail [hero]="selectedHero" msg="123"></my-hero-detail> //first way
<my-hero-detail [hero]="selectedHero" [msg]="'123'"></my-hero-detail> //second way
Upvotes: 4