I've encountered a challenge while using angular 2 (2.0.0-beta.17). The app works perfectly on most browsers, but as expected, IE 11 is causing trouble.
The scripts included in the head for angular are:
<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>
Here's the template being used:
<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 issue lies with LINE 6:
[style]="reviewStyles(review.id)"console.log(this.styles[id]); is used. It seems the styles do not reach the DOM element in IE. Can anyone assist?
In the component export class, the following function is bound to that style:
reviewStyles(id){
return this.styles[id];
}