CODEWITHSUNDEEP
d3.jsangular
AMB0027
AMB0027

Reputation: 121

How to catch onDestroy in Angular2 for component that is removed

I have a component that I add as a placeholder while data is loading. Once the data is loaded, it overwrites this component with the actual data. Unfortunately, this components ngOnDestroy() method is never called, so it just constantly runs in the background and is never removed. How can I make sure I catch when it is removed, and properly dispose of it? Code below:

template.html

    <div class="row status">
      <div class="small-6 columns indent">SOME DATA</div>
      <div id='data_id' class="small-6 columns">

        <!-- This is the component that will be removed and replaced -->
        <app-loading-dots></app-loading-dots>

      </div>
    </div>

component_remover.ts

update_view(new_data, selector): void {
  var text_element = d3.select(selector);
  this.tween_it(text_element, new_data, 5000);
}

loading-dots.ts

export class LoadingDotsComponent implements OnInit, OnDestroy {

  /* Other code... */

  constructor() {}


  ngOnDestroy() {
    console.log("Destroyed");
    clearInterval(this.interval);
  }

  /* ... */

}

Basically, the component_remover takes the new data, which is a number, and tweens it from 0 to the new number, and writes that new text to the text_element. This overwrites my app_loading_dots component in my template, but I don't catch the ngOnDestroy call. Any ideas how I can properly dispose?

Upvotes: 1

Views: 1911

Answers (1)

Guilherme Meireles
Guilherme Meireles

Reputation: 7919

If I understande correctly, your component is not being removed by angular. That means that angular does not know the component was destroyed and does not trigger ngOnDestroy. If you want to remove the component use something like ngIf or add the component dynamically so you can control when you want to remove it.

Upvotes: 3

Related Questions