how to bind a constant to target component in angular2(dart)?

Question

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?

Stefan Svrkota · Accepted Answer · 2016-09-25 20:16:29Z

4

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

edited Sep 25, 2016 at 20:16

answered Sep 25, 2016 at 20:01

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

fatdragon Over a year ago

Works perfectly. Thanks

Collectives™ on Stack Overflow

how to bind a constant to target component in angular2(dart)?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related