1

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?

AMB0027
  • 121
  • 12
  • In addition to @GuilhermeMeireles 's suggestion, you may be able to call the OnDestroy function yourself before you overwrite the data. See http://stackoverflow.com/questions/34093670/angular-2-adding-removing-components-on-the-fly for an idea of how – Gab Sep 28 '16 at 22:55
  • Thanks for the comment! I think I'm going to go with using *ngIf – AMB0027 Sep 29 '16 at 13:07

1 Answers1

3

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.

Guilherme Meireles
  • 7,849
  • 2
  • 21
  • 15
  • Creating a boolean in my component to keep track of when I needed to display the component, and using the *ngIf directive to display it did the trick. Thanks – AMB0027 Sep 29 '16 at 13:07