Angular4: *ngIf in not hiding element, instead creating duplicate elements in Internet explorer 11

Question

I am facing issue using *ngIf to show different types of chart based on some flag. Its working in chrome but in IE11. *ngIf contents are getting added to DOM when flag is true, not getting deleted if flag is false.

Because of this each time I toggle flag new chart are getting created.

please help me. if I am doing something wring.

Context: We have two type of forms checkbox/radiobox. Once user clicks submit Button. Charts will rendered accordingly Checkbox - bar chart Radiobox - pie chart

contents are switched using *ngIf. its working in chrome.

In IE11, *When ngIf flag sets to false. element is not removed and replaced, instead creating new set of chart and forms.

<ht-check-form 
  *ngIf="!chartDisplay"
  [surveyDetails]="survey"
  (onFormSubmit)="submitSuvery($event)"
></ht-check-form>

<ht-chart
  *ngIf="chartDisplay"
  [surveyDetails]="survey"
  [chartResult] = "chartData"
></ht-chart>

Sample code is in plunker: https://plnkr.co/edit/bANp2nJzyVMTFpK9F8NE?p=preview

Help here is appreciated. – Vishwas HK Jan 18 '18 at 13:43 — Vishwas HK, Jan 18 '18 at 13:43
I am running into the same issue. – VSO Apr 02 '18 at 20:37 — VSO, Apr 02 '18 at 20:37

score 1 · Answer 1 · edited Aug 12 '20 at 07:57

I don't know why it happens. But it also happened to me, with the same kind of HTML markup: an element with *ngIf="condition" followed by another element with *ngIf="!condition".

Sometimes (~1% of the times), one of those elements would be duplicated. When leaving/coming back to the page, it was ok again. Seems like a weird, random, bug.

Instead, I used a ngSwitch.

In your case, it would look like this:

<ng-container [ngSwitch]="chartDisplay == null">
    <ht-check-form 
      *ngSwitchCase="true"
      [surveyDetails]="survey"
      (onFormSubmit)="submitSuvery($event)"
    ></ht-check-form>
    <ht-chart
      *ngSwitchCase="false"
      [surveyDetails]="survey"
      [chartResult] = "chartData"
    ></ht-chart>
</ng-container>

let's be clear: it's supposed to be exactly the same thing! (just maybe better in performance because there's only one "watcher")

but so far, it has worked for me; I don't have that weird duplication anymore

even after using switch case, it is creating duplicate elements. — Suhail Akhtar, Nov 21 '18 at 10:25

Angular4: *ngIf in not hiding element, instead creating duplicate elements in Internet explorer 11

1 Answers1