It has been mentioned in the comments that displaying 20k rows at once is not ideal. Even without considering Angular, having 20k rows on a page can be overwhelming for a browser.
I am displaying packet capture in the browser and I need all of them to be visible on the page simultaneously
The idea of having all the rows on the page at the same time is not practical. With limited screen space (around 1k pixels), it is impossible to view all 20k rows concurrently. Instead, focusing on creating a user-friendly experience for navigating through the data without burdening the DOM with all the rows is crucial. Solutions like paging and virtual scrolling are commonly employed to achieve this. These methods rely on the server's ability to handle data pagination efficiently. However, adaptations can be made for client-side data if it's already stored in memory.
If you prefer not to use paging or virtual scrolling, achieving optimal performance may prove challenging. The DOM's limitations make it difficult to manage such a large dataset effectively.
That said, there are Angular-specific solutions available for implementing virtual scrolling: