Directive memory leak DOM nodes

[LiadIdan]

I'm submitting a...

Bug report

Current behavior

I have a simple directive that creates a new img element and appends it to the host element. The directive applied to the template of a component that nested inside an *ngFor repeater.
When the array of the *ngFor gets updated, or when I navigate back and forth between pages, the nodes count continue to go up and up.

Expected behavior

The detached node should flush from memory.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/6APxdz5myfuVgSrwP056?p=preview
Click on the "Load Posts" button, then on the posts page keep pressing on the "Load More" button / return to the home page and click on the "Load Posts" button again.

Environment

Chrome (desktop) version 60.0.3112.113

[pkozlowski-opensource]

If you doing low-level DOM manipulation like in your example, you need to cleanup DOM nodes you've created in the ngOnDestroy hook.

More importantly, though, for me the ImageDirective should be ... a component! In this case you wouldn't need manual DOM manipulation and you wouldn't bump into nodes leak problem.

IMO it works as designed, I'm not sure if Angular can track & destroy manually created nodes.

[LiadIdan]

Got it! Thank you for the quick reply and the clarifications! 😉

[harishmegharaj]

I'm facing same problem, even on doing ngOnDestroy the DOM is accumulating. Can you please share the solution through Plunkr?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}