Styles not being removed when evaluated to null in IE

[ericmartinezr]

Steps to reproduce and a minimal demo of the problem

See this plnkr http://plnkr.co/edit/WPKg2KgIXMIxugSpXEMQ?p=preview

What steps should we try in your demo to see the problem?

Press the "change my bg color" button as much as you want, it should toggle the div's background from none to red, and viceversa.

Now, to see it working for real in IE, change

'[style.background-color]' : `isRed ? 'red': null`

to

'[style.background-color]' : `isRed ? 'red': ''`  // change 'null' to single quotes

with that will work correctly in both chrome, IE and FF.

I got this solution/workaround from @alexhub in gitter's chatroom.

Current behavior

In chrome works perfectly, but in IE the background color is added but not removed.

Expected/desired behavior

It should work with null in all browsers, or it should be changed to '' to work with most of them.

Other information

IE11 - 11.0.9600.18230
IE10 (emulated)
IE9 (emulated)

All with the same behavior.

Should this line be changed to use an empty string instead?

element.style[stylename] = '';

[ComFreek]

I've just stumbled upon this issue as well. Strangely enough, nullifying a CSS property worked with Angular 2 Beta 9 in my application, but not with Beta 14.

The documentation on directives, which makes use of setting a CSS property to null, should probably be updated as well: https://angular.io/docs/ts/latest/guide/attribute-directives.html

[ericmartinezr]

@ComFreek would you mind to provide an example of your case working with beta.9? Mine (the plnkr above) doesn't work with beta.9.

[ComFreek]

@ericmartinezr Yesterday, I couldn't reproduce the behavior with a fresh Plunkr and Beta 9, however, I could exactly reproduce it with my old code base. Today, very bizarrely, the behavior of my old copy changed after clearing IE's cache, i.e. nullifying elem.style.backgroundColor (in my case) has no effect anymore.

Maybe the behavior was due to the following specifics of my application:

Each time the user clicked on an SVG rectangle (loaded inside an <object> tag), my code recomputed some values. However, as events triggered by the SVG DOM from within an <object> tag are somehow not recognized by Angular, I had to workaround it by using the following code snippet:

// run inside a component method
this.zone.runOutsideAngular(() => {
  // My component function recompute() which changes some variables of the component
  // which are referenced in the template.

  // In the template I generate an <ul> list using *ngFor
  // out of these variables and each <li> element has the highlight directive
  // with the mouseenter and mouseout events. The latter of them sets the
  // backgroundColor to null.
  this.recompute();

  this.zone.run(() => {
    // Update complete, do nothing here (note: we have to specify a callback function, though)
  });
});

I could imagine this triggered an (internal) refresh, so that the UI elements were re-generated and the previous styles therefore lost.

[ericmartinezr]

It got worst with RC.1, now '' doesn't remove the styling in IE

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

I'm not sure this is related to #8491 but I wouldn't be surprised

[zoechi]

'inherit' and 'none' are working though
'' also doesn't work in Chrome

[tylerchurch]

Can confirm, '' used to work in Chrome, but in the latest RC it is no longer removing the CSS property.
null does seem to be working in Chrome in the latest RC.

[ericmartinezr]

Still reproducible with RC6 http://plnkr.co/edit/ysSKiXLb9E7UnSpb3sNL?p=preview (IE11)

[vicb]

probably a bug in the renderer

[vicb]

Is this still an issue in 2.0.1 ?

[ericmartinezr]

@vicb yes, it is still an issue, plnkr is the same with latest zone http://plnkr.co/edit/POko9BTz4TUpF9q16tkR?p=preview, in the network tab you can see that ng2 2.0.1 is being downloaded (don't know how to make it run against master using *-builds).

[3alshamiri]

if ( isRed )
element.style.background = '#FF0000';
else
element.style.cssText = '';

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