I am using mat-expansion-panel from Angular Material in my app and I combine it with infinite scroll so that I won't load all of them at once and it won't lag because of it. However, once I scroll to the bottom and I have about 30-40 elements loaded, it lags when I open the expansion panel.
My first solution to this was to use a virtual-scroll.
But it doesn't support variable height items.
My next solution was to use infinite-scroll on both directions, but I have never seen other apps make use of this so I think there should be a better way.
Has anyone else encountered this problem and solved it in a better way?
Your can use HTML Details Summary Tags:
Html:
<details>
<summary>Your Heading</summary>
<p> Your First Paragraph.</p>
<p> Your Second Paragraph.</p>
</details>
CSS to hide default Marker: // you can style this as your want after this
summary::-webkit-details-marker { display: none }
UPDATE for 2021:
to hide arrow use this css:
details > summary {
list-style: none;
}
details > summary::marker {
display: none;
}