Repository navigation
Parsing html template with [hidden] fails in IE9/10 #5774
Description
I just started to test app which is built on top of Angular2 in different environments and it turned out there are some issues on IE (mostly 9) and I'll try to let you know about them.
One of them is html parser. When trying to parse following lines:
<div [hidden]="!isAuthorized">
I get such error on both IE9 and IE10:
Template parse errors: Can't bind to 'hidden' since it isn't a known native property
Code above works on modern browsers like a charm.
To fix it I had to make a workaround which seem to have no problems:
<div [style.display]="isAuthorized ? 'block' : 'none'">
Reacted by PatrickJS, lucas and RajeshKDev
Activity
[-]Parsing html template with [hidden] or [visible] fails in IE9/10[/-][+]Parsing html template with [hidden] fails in IE9/10[/+]pkozlowski-opensource commentedon Dec 10, 2015
@wkwiatek I presume this is because IE9 doesn't have
hiddenproperty - will try to confirm later on. If so it would need a polyffil, I'm not sure we want to work-around it in the framework (to be seen).wkwiatek commentedon Dec 10, 2015
@pkozlowski-opensource Yes, there's no attribute like
hiddenin IE9/10 (it was introduced in IE11)I'm just wondering what is the preferable way of showing/hiding elements that is cross-browser compatible? I mean what's the successor of
ng-show,ng-hide? If the one above is that one I would vote for it to have polyfill in angular itself.pkozlowski-opensource commentedon Dec 10, 2015
@wkwiatek
[hidden]means binding to a property not an attribute. So we need to check if a property exists (probably not since there is no attribute)wkwiatek commentedon Dec 10, 2015
Neither property nor attribute
hiddenexists in IE9/10.zoechi commentedon Dec 10, 2015
I didn't do much web development with older browsers but I haven't heard yet that attributes need to exist on an element in order to be set. Can't arbitrary custom attributes added to elements? Is it just that Angular treats the
hiddenattribute special or is this special with older browsers?pkozlowski-opensource commentedon Dec 10, 2015
@zoechi once again
[hidden]="exp"means binding to PROPERTY, not an attribute. And yes, a property must exist - like any other member of a class that you are trying to use.Of course you could do
[attr.hidden]="exp"to add / remove a hidden attribute. But it won't change much if a browser is not aware of it (didn't implement any logic to show / hide stuff based on the presence of this attribute).pkozlowski-opensource commentedon Dec 10, 2015
I would say
ngIfchore: fix md-messages on ie by not using unsupported hidden property
e-oz commentedon Apr 13, 2016
better alternative to slow
*ngIfis combination of[attr.data-hidden](instead of[hidden]) and rule[data-hidden="true"]{display: none !important}in global CSS.zoechi commentedon Apr 13, 2016
I think this can be closed. The workaround @e-oz showed is the common workaround for the missing
hiddensupport in IE9.zoechi commentedon Apr 13, 2016
@e-oz Sorry, didn't fully formulate the sentence - updated.
ocombe commentedon Apr 25, 2016
Not really, since this is not consistent with the other browser this should be fixed: either force to use [attr.hidden] everywhere or fix it for IE9/10. I just found out that my website couldn't display in IE10 because of this.
e-oz commentedon Apr 25, 2016
@ocombe in IE9/10 it's better to use
[attr.data-hidden], because they want to use custom attributes only with "data-" prefix.ocombe commentedon Apr 25, 2016
They = IE ?
e-oz commentedon Apr 25, 2016
Yes, IE 9 and IE 10. Small group of ugly browsers.
On Mon, 25 Apr 2016 at 18:10 Olivier Combe notifications@github.com wrote:
gog182 commentedon May 23, 2016
Would it seem normal to you that I face the same issue with IE 11 as well?
zoechi commentedon May 23, 2016
@gog182 Without a Plunker that demonstrates what you tried and allows to reproduce the issue it's hard to tell.
pkozlowski-opensource commentedon Jun 6, 2016
Going to close this one as there is no much we can do here... If a given browser doesn't support properties than it doesn't... One way to go would be to use polyffils, if possible....
kuriel-dev commentedon Aug 13, 2017
@e-oz solution, can't handle conditional var initialization, like:
[attr.data-hidden]="someVar"but works if you explicitly check var init:
[attr.data-hidden]="someVar?true:false"btw, i hate you IE a lot of patches to make you run....
ocombe commentedon Aug 14, 2017
@ikuriel even simpler:
[attr.data-hidden]="!!someVar"kuriel-dev commentedon Aug 15, 2017
yes, simpler tnx.
kayode-anthony commentedon Oct 25, 2017
If you are using bootstrap you can also use bootstrap's hidden. Similar to the CSS solution but you don't have to add anything to the global CSS file.
angular-automatic-lock-bot commentedon Sep 12, 2019
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.