CODEWITHSUNDEEP
javascriptangular
Pablo
Pablo

Reputation: 10602

Angular 2 bind properties

I'm learning Angular2, for that I'm creating an example code.

I have a reusable component Card which should receive a parameter:

import { Component, Input } from '@angular/core'

@Component({
  selector: 'card',
  templateUrl: '../templates/card.html'
})

export class Card {
    @Input() title;
}

that title parameter should be a string.

This is the html template for this component so far:

<div class='card'>
  {{ title }}
  <ng-content></ng-content>
</div>

and from other component I'm calling it like this:

<card
  [title]='Enter your raw json'>
  Example
</card>

I'm getting this error in the console (beside a lot others):

EXCEPTION: Template parse errors:
Parser Error: Unexpected token 'your' at column 7 in [Enter your raw json] in JsonTextInput@1:2 ("<card
  [ERROR ->][title]='Enter your raw json'>
  Example
</card>"): JsonTextInput@1:2

What is wrong with the property binding?

Upvotes: 0

Views: 144

Answers (1)

awiseman
awiseman

Reputation: 5704

When you use property binding, Angular2's template parser will interpret the content as a property of your component class:

@Component({
  template: `<card [title]="property"> ... </card>`,
  ...
})
class SomethingComponent {
  property = 'something'; // this will be bound to the title input of card
}

If you want to pass a string literal to a property binding, put it inside single quotes, like this:

[title]="'some title'"

Upvotes: 4

Related Questions