CODEWITHSUNDEEP
angularangular5angular2-templateangular2-directives
user5931608
user5931608

Reputation: 93

Angular *ngIf memory usage

Is my observation correct that even though *ngIf host element is not in the DOM it is in the memory/heap. So it is creating the host element but do not attach it to the DOM.

I am on it because I have a huge list. Inside each list element are some *ngIfs. I see a lot of detached nodes and memory usage. When I remove not used *ngIfs then my memory and detached nodes counter is much smaller.

If it like that what is the best way to handle it? I need to decide during the run time if the element will have input, text, time-picker field etc.

Thanks.

As a soulution, if someone has same problem: GitHub- ngIf keeps node in memory

Upvotes: 3

Views: 1961

Answers (1)

benshabatnoam
benshabatnoam

Reputation: 7660

I think you got it wrong, we can see in angular.io docs:

NgIf case study:

When the condition is false, NgIf removes its host element from the DOM, detaches it from DOM events (the attachments that it made), detaches the component from Angular change detection, and destroys it. The component and DOM nodes can be garbage-collected and free up memory.


Why remove rather than hide?:

Although invisible, the component—and all of its descendant components—tie up resources. The performance and memory burden can be substantial, responsiveness can degrade, and the user sees nothing.

Upvotes: 3

Related Questions