I've the following code:
<cdk-virtual-scroll-viewport #scrollSection id="scrollSection"
[itemSize]="generalSettings.rowHeight"
[attr.data-resource-type]="'A'" [minBufferPx]="minBufferPx"
[maxBufferPx]="maxBufferPx"
[ngClass]="isScrollbarAvailable ? 'a-section-scroll' : 'a-section-no-scroll'">
<table #tableA id="tableA" [style.width.px]="aWidth" class="resource-grid">
<tbody #container>
<tr *cdkVirtualFor="let resource of resourcesList$ | async; let itemIndex = index; trackBy: trackItem;">
<app-resource [resourceData]="resource" [style.background-color]="'none'"
[style.width.px]="scaleOptions.width" [attr.Id]="resource.Id"
(taskDragStart)="onTaskDragStart($event)" (taskDragEnd)="onTaskDragEnd($event)"
(taskDragHover)="onTaskDragHover($event)">
</app-resource>
</tr>
</tbody>
</table>
</cdk-virtual-scroll-viewport>
<app-resource> component uses the ChangeDetectionStrategy.OnPush When I use the mouse wheel to scroll, it only calls the ngOnChanges for the components already rendered but when I use the mouse click to scroll, it calls both the ngOnInit and ngOnChanges because of which I'm getting a memory spike as this component is rendered thousands of times inside the virtual scroll, when the app loads the memory footprint is around 250M in chrome's Task Manager, when I do the scroll it reaches at 450M and after about 10 seconds it reduces to 350M but never to where it starts.
I've removed the input properties i.e. [resourceData] in order to see if it has any impact. I've also removed all the template code from the component i.e. resource.component.html and only placed a span element but still no luck.
What would be the best strategy I should use here to resolve the memory issues?