title: DOM memory leak Angular 4
body: <p>We are developing an application which has tabular grids, each grid displaying differently. Attaching the HTML snippet which has toggle functionality, on continuous toggling between 2 grids lead to "Memory Footprint" or "Memory" growing.
  If the application is used for around 10-15 mins, chrome browser crashes. I did some analysis using chrome dev tools and found DOM doesn't get detached. It keeps on getting accumulated</p>
  
  <p>Main.HTML:</p>
  
  <pre><code>    &lt;div id="compDetailsDiv" [ngClass]="showListView() ? 'height126' : ''"&gt;
          &lt;div *ngFor="let comp of compPropOrigIndexArr; let i=index;"&gt;
              &lt;d-pro-comparables [compProp]="compPropOrigIndexArr[i] 
                ['comp']" [index]="i" [origIndex]="compPropOrigIndexArr[i] 
                 ['index']" 
                [productName]="productName" *ngIf="!hideCriteriaCompCards(i) 
                &amp;&amp; 
               !showListView()"&gt;&lt;/d-pro-comparables&gt;
          &lt;/div&gt;
  
          &lt;div *ngFor="let comp of compPropOrigIndexArr; let i=index;"&gt;
              &lt;d-pro-comparable-list  [compProp]="compPropOrigIndexArr[i] 
              ['comp']" [index]="i" [origIndex]="compPropOrigIndexArr[i] 
              ['index']" [productName]="productName" 
              *ngIf="!hideCriteriaCompCards(i) &amp;&amp; showListView()"&gt;&lt;/d-pro- 
              comparable-list&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Component HTML: (d-pro-comparables)</p>
  
  <pre><code>&lt;div id="compList{{index}}" [ngClass]="{'sellectedBackground' : 
     isSelected}"&gt;
    &lt;div id="comparableDiv" [ngClass]="{'highlightBorderGreen': isHighlighted 
       &amp;&amp; isSelected, 'highlightBorderBlue': isHighlighted &amp;&amp; !isSelected}" 
       (click)="compClick();" (mouseenter)="highlightCompClickHover()" 
       (mouseleave)="compDivOnMouseOut()" (dblclick)="benchmarkComp()"&gt;
  &lt;ul&gt;
    &lt;li class="addressCell" title="{{compPropUIObj['displayAddressLine1']}}, 
       {{compPropUIObj['displayAddressLine2']}}" (click)="searchAddress()"&gt; 
       {{compPropUIObj['displayAddressLine1']}}, 
       {{compPropUIObj['displayAddressLine2']}}&lt;/li&gt;
    &lt;li class="bedsCell"&gt;{{compPropUIObj['beds']}}&lt;/li&gt;
    &lt;li class="bathsCell"&gt;{{compPropUIObj['baths']}}&lt;/li&gt;
    &lt;li class="sizeCell"&gt;{{compPropUIObj['size']}}&lt;/li&gt;
    &lt;li class="hTypeCell" title=" 
      {{compPropUIObj['hTypeStdLandUseCode']}}"&gt; 
      {{compPropUIObj['hTypeStdLandUseCode']}}&lt;/li&gt;
    &lt;li class="yearBuiltCell"&gt;{{compPropUIObj['hAge']}}&lt;/li&gt;      
    &lt;li class="dateCell"&gt;
          &lt;span&gt;{{compPropUIObj['saleListDate']}}&lt;/span&gt;
      &lt;/li&gt;
    &lt;li class="priceCell"&gt;
          &lt;span &gt;{{compPropUIObj['saleListPrice']}}&lt;/span&gt;
  
      &lt;/li&gt;
    &lt;li class="hSimilarityCell"&gt;
        &lt;div class="hSimilarityChart"&gt;
            &lt;img [src]="hSimilarityDataUrl" class="chartImageSize"&gt;
        &lt;/div&gt;
        &lt;div class="absoluteHScore"&gt; 
         {{compPropUIObj['propertySimilarity']}}&lt;/div&gt;       
    &lt;/li&gt;
    &lt;li class="nSimilarityCell"&gt;        
        &lt;div class="nSimilarityChart"&gt;
            &lt;img [src]="nSimilarityDataUrl" class="chartImageSize"&gt;
        &lt;/div&gt;
        &lt;div class="absoluteNeighborScore"&gt; 
         {{compPropUIObj['nSimilarity']}}&lt;/div&gt;        
    &lt;/li&gt;
    &lt;li class="removeCell"&gt;
        &lt;span [hidden]="removedPropIndexArr.indexOf(origIndex)&gt;-1" 
         (click)="removeComp();"&gt;Remove&lt;/span&gt;
        &lt;span [hidden]="removedPropIndexArr.indexOf(origIndex)==-1" 
         (click)="addComp();"&gt;Add&lt;/span&gt;
    &lt;/li&gt;
    &lt;/ul&gt;     
    &lt;/div&gt;
    &lt;/div&gt; 
  </code></pre>
  
  <p>I have added ngOnDestroy in all the components with below code:</p>
  
  <pre><code>  ngOnDestroy() {
       Object.keys(this).map(k =&gt; {
       this[k] = null;
       })
    }
  </code></pre>