angular: Parsing html template with [hidden] fails in IE9/10

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'">

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 3
Comments: 22 (14 by maintainers)

Commits related to this issue

chore: fix md-messages on ie by not using unsupported hidden property - instead just manipulate display for now. TODO: this is lame. see https://github.com/angular/angular/issues/5774 — committed to justindujardin/ng2-material by justindujardin 8 years ago

Most upvoted comments

better alternative to slow *ngIf is combination of [attr.data-hidden] (instead of [hidden]) and rule [data-hidden="true"]{display: none !important} in global CSS.

+15

e-oz on Apr 13, 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:

They = IE ?

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/angular/angular/issues/5774#issuecomment-214384861

e-oz on Apr 25, 2016

@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…

ningacoding on Aug 13, 2017