Bug: HostBinding get incorrect semantics when property name is same as literal

[trotyl]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When using @HostBinding() with a property name is one of true, false or null, Angular will incorrectly regard it as a literal value, for example:

export class App {
  @HostBinding('class.foo') true = false
  @HostBinding('class.bar') false = true
}

Would result to <element class="foo">, even the binding value is false.

Expected behavior

Should got <element class="bar"> according to the binding value.

And reserved words are allowed as property name in JavaScript.

But for:

@Component({
  host: {
    '[class.foo]': 'true'
  }
})
export class App { }

It should still be regarded as literal since it's general expression here.

Possibly we'll need a new boolean value for parser to indicate whether it's in expression context or not.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/wUsocMIjZ82RnSxOc3U5?p=preview

What is the motivation / use case for changing the behavior?

Angular uses a unified parser for all bindings, so it's indistinguishable whether it came from.

But for HostBinding()s directly written on class properties, there is no expression context at all since the HostBinding() decorator is only for specific property (for what property decorator means), so it should be a bug of Angular parser for the binding recognition. Actually it seems to be a bug of metadata collector, since it's already indistinguishable when it came to parser.

Environment

Angular version: 4.3.4 (likely all)


Browser:
- [x] Chrome (desktop) version XX
- [x] Chrome (Android) version XX
- [x] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [x] Safari (iOS) version XX
- [x] IE version XX
- [x] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[trotyl]

I can help to provide a fix if you agree this is unexpected.

[vicb]

sounds like a bug.
your help infixing that would be appreciated.

[atscott]

Confirmed with Ivy as well: https://stackblitz.com/edit/angular-ivy-gz9sfc?file=src%2Fapp%2Fapp.module.ts

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}