Angular 2 ng-class not working in IE 11

Question

I am using angular 2 ngClass for disabling the anchor tag, this is working in google chrome but not working in IE 11. Does any one faced similar issue?

<div id ="fileList" class="panel-body collapse in">
            <div class="table-responsive">
                     <table id="uploadInvoice" class="table table-bordered table-condensed">
                    <thead class ="thead">
                    <tr>
                        <th class="gridHeader sortable order1" style="display:none;">File ID</th>
                        <th class="gridHeader sortable">File Name</th>
                        <th class="gridHeader sortable">Upload Status</th>
                        <th class="gridHeader sortable">Uploaded Date</th>
                        <th class="gridHeader sortable">Updated Date</th>
                        <th class="gridHeader sortable">Uploaded BY</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let file of fileList">
                        <td style="display:none;">{{file.id}}</td>
                        <td><a  href="#fileList" data-toggle="collapse" [ngClass]="{'disabled':file.fileStatus == 'VALIDATING'}" 
                        (click) ="getValidationSummary(file.id,file.fileName)">{{file.fileName}}</a></td>
                        <td>{{file.fileStatus}}</td>
                        <td>{{file.createdDate}}</td>
                        <td>{{file.modifiedDate}}</td>
                        <td>{{file.createdBy}}</td>                                      
                    </tr>
                    </tbody>
                </table>

                </div>
            </div>
        </div>

i just ran into a similar situation. did you have any luck resolving this? — atsituab, Nov 22 '16 at 18:37
There are two ways to fix this. uisng *NgIf or using [disabled] — Kiran Kumar, Nov 22 '16 at 18:43

score 1 · Accepted Answer · answered Nov 22 '16 at 18:53

I resolved it by using *ngIf instead of ngClass.

 <div id="fileList" class="panel-body collapse in">
                            <div class="table-responsive">
                                <table id="uploadInvoice"
                                    class="table table-bordered table-condensed">
                                    <thead class="thead">
                                        <tr>
                                            <th class="gridHeader sortable order1" style="display: none;">File
                                                ID</th>
                                            <th class="gridHeader sortable">File Name</th>
                                            <th class="gridHeader sortable">Upload Status</th>
                                            <th class="gridHeader sortable">Uploaded Date</th>
                                            <th class="gridHeader sortable">Updated Date</th>
                                            <th class="gridHeader sortable">Uploaded BY</th>
                                            <th class="gridHeader sortable ">Comments</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let file of fileList">
                                            <td style="display: none;">{{file.id}}</td>
                                            <td
                                                *ngIf="(file.fileStatus != 'PROCESSED' && file.fileStatus != 'ERRORED')">{{file.fileName}}</td>
                                            <td
                                                *ngIf="(file.fileStatus == 'PROCESSED' ||  file.fileStatus == 'ERRORED'    )"><a
                                                href="#fileList" data-toggle="collapse"
                                                (click)="getValidationSummary(file.id,file.fileName)">{{file.fileName}}</a></td>
                                            <td>{{file.fileStatus}}</td>
                                            <td>{{file.createdDate}}</td>
                                            <td>{{file.modifiedDate}}</td>
                                            <td>{{file.createdBy}}</td>
                                            <td><span class="wrappingData">{{ file.comments }}</span></td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>

score -1 · Answer 2 · answered Jan 08 '20 at 10:55

-1

You should add a polyfill for 'classList', there is a small problem with this in IE 11. Check - https://www.npmjs.com/package/classlist-polyfill

answered Jan 08 '20 at 10:55

aerodziewicz

1
1

Angular 2 ng-class not working in IE 11

2 Answers2