CODEWITHSUNDEEP
javascripthtmlcssinternet-explorerangular
Schalk Keun
Schalk Keun

Reputation: 548

Angular 2 IE issue using [style]=""

I've bumped into a little bit of a headache, i'm using angular 2 (2.0.0-beta.17) and in all browsers normal humans use my app is working perfectly. But obviously IE 11 < is a pain and want to be difficult.

This is the scripts i'm including in the head for angular:

<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.2/es6-shim.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/tools/system.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/tools/typescript.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/2.0.0-beta.17/Rx.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/2.0.0-beta.17/angular2.min.js'></script>

Now I use the following template:

<div *ngIf="review_items" class="review-item">
    <a class="left" (click)="scrollAction('left')"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
    <a class="right" (click)="scrollAction('right')"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
    <a href="#" class="view-reviews">See all {{review_count}}</a>
    <div class="reviews-content">
        <div *ngFor="let review of review_items" [style]="reviewStyles(review.id)">
            <div class="author">{{review.review_name}} <i>Verified Buyer {{review.date}}</i></div>
            <div class="tour">
                <b>{{review.title}}</b>
                <div class="star-rating" [innerHTML]="review.stars"></div>
            </div>
            <div class="description">
                <div *ngIf="review.single_content">
                    <div [innerHTML]="review.single_content"></div>
                </div>
                <div *ngIf="review.hidden_content">
                    <div [innerHTML]="review.visible_content" style="display: inline;"></div>
                    <div [innerHTML]="review.hidden_content" [style.display]="displayReadMore(review.id)"></div>
                    <a href="#" class="read-more-review" (click)="readMore($event,review.id)" [innerHTML]="review.showmore_button"></a>
                </div>
            </div>
        </div>
    </div>
</div>

The problem is LINE 6: [style]="reviewStyles(review.id)" and it only is a problem in our best friend IE, in chrome, firefox, edge it works 100%;

In my component export class the following function is bound to that style:

reviewStyles(id){
        return this.styles[id];
    }

and this.styles[id] will contain something like this: opacity: 1; left: 0; but in IE it does not return any styles, although if i console.log(this.styles[id]); in IE it does show the correct CSS information but it never reaches the DOM element? Help!

Upvotes: 1

Views: 821

Answers (1)

nashcheez
nashcheez

Reputation: 5183

Yes, [styles] will not work on IE, just as the [hidden] attribute.

IE has a different method of how it handles attributes and in a way says screw you to modern JS frameworks.

What I would rather do here for a cross-browser implementation is :

<div *ngFor="let review of review_items" [style.opacity]="1" [style.left]="0">

Upvotes: 2

Related Questions