I currently have a nested component inside of a td cell of an angular datatable. I use this nested component to design card layout as a one large cell. I want to use the built in paging, sorting and searching of the angular datatables.
The issue is the ngOnInit gets called for this component for all 80 rows, even if only 10 are displayed on the page. Is there a way to lazy load this component so that ngInit() is only called when the component is disaplayed on screen?
I have tried rolling by own lazy load by adding an *ngIf="index < pageSize". It works decent for paging, but sorting and searching messes it up. I'm hoping there is a way to defer the load of this component until its actually on the screen (even if slight UI delay).
