I cannot use calc with @HostBindings

[jrgleason]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
this works

    @HostBinding('style.top')
    private readonly TOP = "100%";

But this does not...

    @HostBinding('style.top')
    private readonly TOP = "calc( 100% + 2px )";

Expected behavior

The calc would succeed and I would see the top value set in the dev tools

Minimal reproduction of the problem with instructions

https://plnkr.co/edit/LD6KRQ5ofWOIYWKNzktc?p=preview

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

Since there is no other good way to set styles on directives I need a way to set a height based on calc. I have tried some hacking with the nativeElementRef but with only limited success. It seems that if the browser supports this behavior @HostBinding should too

Please tell us about your environment:

Webpack, Angular2

• Angular version: 2.0.X

• Browser: [all]

• Language: [all]

[DzmitryShylovich]

Can u pls remove all unnecessary stuff from plunkr and describe observed vs expected behavior...

[jrgleason]

There isn't all that much unnecessary stuff, The basic nature should be explained but let me try rehashing. If you run the plunker as is and inspect the DOM you should see...

<div class="dropdownArea isOpen" jgcollapsearea="" style="position: absolute; background-color: blue; right: 0px; top: 100%; overflow: hidden; height: auto;">
        <router-outlet></router-outlet><my-app-2>
    <div>
      <h2>This is the dropdown</h2>
    </div>
  </my-app-2>
      </div>

The important part here is the top: 100%. Now comment out the 100% and uncomment the calc so it looks like this...

@HostBinding('style.top')
// private readonly TOP = "100%";
// Should work but doesn't
private readonly TOP = "calc( 100% + 3px )";

Notice that now there is no top in the DOM...

<div class="dropdownArea isOpen" jgcollapsearea="" style="position: absolute; background-color: blue; right: 0px; overflow: hidden; height: auto;">
        <router-outlet></router-outlet><my-app-2>
    <div>
      <h2>This is the dropdown</h2>
    </div>
  </my-app-2>
      </div>

I can go in and manually add the calc statement in dev tools and see it work. Let me know what other info I can provide.

[jrgleason]

I am seeing some general issues with calc and top in general I will look into it a bit more and double check this is an Angular issue.

[jrgleason]

NM I guess what I was looking for was this...

@HostBinding('style.top')
private readonly TOP = "100%";
@HostBinding('style.margin-top')
private readonly MARGIN_TOP = "2px";

[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.}