CODEWITHSUNDEEP
angularangular-dart
fatdragon
fatdragon

Reputation: 2309

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

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

Answers (1)

Stefan Svrkota
Stefan Svrkota

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

Related Questions