title: Angular: Garbage collection Components
body: <p>I try to understand how the GabageCollector works after a component was destroyed. I have the following case:</p>
  
  <p>AppComponent:</p>
  
  <pre><code>export class AppComponent {
    testCompoments = [1,2];
  
    removeOne(id){
      this.testCompoments.pop()
    }
  
    nop(){
  
    }
  }
  </code></pre>
  
  <p>AppHTML:</p>
  
  <pre><code>&lt;ng-container *ngFor="let t of testCompoments"&gt;
    &lt;app-test [id]="t" (close)="removeOne($event)"&gt;&lt;/app-test&gt;
  &lt;/ng-container&gt;
  &lt;br&gt;
  </code></pre>
  
  <p>EMPTY FN</p>
  
  <p>TestComponent:</p>
  
  <pre><code>export class TestComponent implements OnInit {
  
    @Output()
    public close = new EventEmitter()
  
    @Input()
    id;
  
    constructor() { }
  
    ngOnInit() {
    }
  
    closeClick(){
      this.close.emit(this.id)
    }
  
  }
  </code></pre>
  
  <p>TestHTML:</p>
  
  <pre><code>&lt;p&gt;{{id}}&lt;/p&gt;
  &lt;button (click)="closeClick()"&gt;close&lt;/button&gt;
  </code></pre>
  
  <p>Now when i start the app and take a heap-snapshot i see the right amount of objects in memory:
  <a href="https://i.stack.imgur.com/qF81x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qF81x.png" alt="enter image description here"></a></p>
  
  <p>Then i remove a component by clicking the close-button and take a new snapshot:
  <a href="https://i.stack.imgur.com/sEZow.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sEZow.png" alt="enter image description here"></a></p>
  
  <p>To my surprise, there are still two objects? And now additionally the strange thing is, if i click the "EMPTY FN" button, which does nothing (empty-function on app-component), the next snapshot looks like this:
  <a href="https://i.stack.imgur.com/grFM2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/grFM2.png" alt="enter image description here"></a></p>
  
  <p>I have a few questions about this topic:</p>
  
  <ul>
  <li>How the GC works in detail? For my special case i think the GC cant free the memory because there is still a reference to that object. How to find out where this reference lives?</li>
  <li>Why the GC isnt invoked after the first component is removed, but called if the empty function is called afterwards?</li>
  <li>Do i have to care about this "dead" object (assume the testcomponent subscribes to a few observables but unsubscribe them properly via async-pipe or in ngOnDestroy) ?</li>
  </ul>