Removing single quotes around downgraded angular 2 component's properties causes strange behavior

Question

I have a downgraded angular 2 component that works fine in an AngularJS component until I remove the single quotation marks around the component's second property.

EDIT: This filetype this component is used in is ng.jade .

This works:

user-score-component(
  [rating-score]="user.ratingScore"
  '[form-is-disabled]'="false"
  '(on-change)'="onRatingScoreChange($event)"
)

This doesn't:

user-score-component(
  [rating-score]="user.ratingScore"
  [form-is-disabled]="false"
  '(on-change)'="onRatingScoreChange($event)"
)

In the second example, false is applied to rating-score and form-is-disabled is undefined. I am fine leaving the single quotes around form-is-disabled but after some research on hybrid apps I haven't been able to figure out what the single quotes are doing here.

Why are they needed on the second property (form-is-disabled) but not the first (rating-score)?

Answer 1

There is mention of this on github in Pug's issue tracker: https://github.com/pugjs/pug/issues/2050

This is a difficult case to solve. For example:

input(foo='foo' [bar]='bar') //- since 'foo' [bar] is equivalent to
'foo'[bar] input(foo='foo'[bar]='bar') //- which is equivalent to
input(foo=('foo'[bar]='bar')) //- which is equivalent to
input(foo='bar')

input([foo]='foo' (bar)='bar') input(foo='foo'(bar)='bar')
input(foo=('foo'(bar)='bar')) //- 'foo'(bar)='bar → assigning to
rvalue ?

A work around you can use is quoting the attribute names:

input('[foo]'='foo' '[bar]'='bar') input('[foo]'='foo' '(bar)'='bar')

Since the bug is impossible to fix and a logical work around exists, I'm going to close this issue now.