How can I defer loading of rows in a table using Angular to reduce lag in large tables?

I have a found multiple scenarios where either 100s of rows of data need to be loaded or 10s of rows need to be loaded but they all have many components inside. Is there a way to dynamically load only the rows being viewed in the scroll viewport?

Example of a case where there is a heavy component that needs to be loaded for multiple columns in each row:

<table mat-table matSort [dataSource]="tableDataSource" #resultsTable class="mat-elevation-z1">

<ng-container *ngFor="let col of columnsToDisplay;" matColumnDef="{{col}}">
<th mat-header-cell *matHeaderCellDef>{{ col }}</th>
<td mat-cell *matCellDef="let entry; let rowNumber = index">
<app-autocomplete
#autocompleteCell
[id]="'cell-'+rowNumber+'-'+col" *ngIf="col!='controls'"
[type]="col"
[data]="entry[col]"
[disabled]="col=='approvedBy' || entry.exported"
(keydown.arrowdown)="downCell(rowNumber,col)"
(keydown.arrowup)="upCell(rowNumber,col)"
[formatting]="entry.entryType+''"
(input)="textChange(rowNumber,col)"
(dataChange)="updateAfterAutofill($event,rowNumber,col)">
</app-autocomplete>
<button mat-icon-button *ngIf="col=='controls'" color="warn" (click)="deleteRow(entry.id,true)" class="control" matTooltip="Delete row">
<mat-icon>delete</mat-icon>
</button>
</td>
<td mat-footer-cell *matFooterCellDef>{{getColumnTotal(col)}}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></tr>
<tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"
(contextmenu)="contextMenu($event, myRowData)"
[matTooltip]="myRowData.exported?'Can\'t edit a row that has already been exported':''"
matTooltipPosition="above">
</tr>
<tr mat-footer-row *matFooterRowDef="columnsToDisplay sticky: true" matTooltip="Total Hours per Day"></tr>
</table>

Continue reading...