Angular2 directive - string issue

Question

We created a directive in Angular2 and have an input property that should receive a string. The problem is that, we are not able to pass a string.

If we try to do this:

<learning-requirements [title]="You should be able to!" [content]="requirements"></learning-requirements>

It does not work, so we have to do this, and then it works:

<learning-requirements [title]="'You should be able to!'" [content]="requirements"></learning-requirements>

That is our directive:

@Component({
    selector: "learning-requirements",
    directives: [IONIC_DIRECTIVES],
    templateUrl: "build/pages/learning/components/requirements/requirements.html"
})
export class RequirementsComponent {
    @Input() public title: string;
    @Input("content") public items: Array<Requirement>;
}

Any idea how to handle string whithout explicitly using single quotation?

Pankaj Parkar · Accepted Answer · 2016-09-13 12:36:40Z

2

Basically whenever you have attribute wrap with [] square bracket it is going to evaluated attribute value(expression) with context(this) of component.

Since you're directly passing a value you could directly specify title attribute without [] square bracket, which means that the value which you have passed inside attribute would not get evaluated against context(this) of component.

Markup

<learning-requirements 
  title="You should be able to!" 
  [content]="requirements">
</learning-requirements>

edited Sep 13, 2016 at 12:36

answered Sep 13, 2016 at 12:22

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Pankaj Parkar Over a year ago

@dag Glad to hear that it helped, Thanks and cheers, you could find same answer here

micronyks · Accepted Answer · 2016-09-13 12:10:00Z

2

Declare string(Type) variable and use it as shown below,

<learning-requirements [title]="someVar" [content]="requirements"></learning-requirements>


export class AppComponent{
  someVar:string="You should be able to!";
}

answered Sep 13, 2016 at 12:10

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

3 Comments

DAG Over a year ago

Ok, I know this, but is there a way to tell the directive that it's a string to avoid single quotes?

micronyks Over a year ago

I don't understand what are you trying to say. What's your point after this answer?

micronyks Over a year ago

If you don't want to use variable, you have to pass it with single quote.

Collectives™ on Stack Overflow

Angular2 directive - string issue

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related