0

using angular 8, i have a list of thousands of cards which i want to view them effectivly while scrolling, with 4 or more cards per row (using wrap) and still use the virtual scroll feature. as far as my tries go i can have more then 1 item per row. here is my code for reference,

 <cdk-virtual-scroll-viewport itemSize="200" class="viewport" >
     <div class="card" *cdkVirtualFor="let c of cards ; templateCacheSize: 50">
            <img class="image" src="{{cdnAddress}}/{{set1Address}}/img/cards/{{c.cardCode}}.png">
     </div>
 </cdk-virtual-scroll-viewport>
user6384585
  • 11
  • 4
  • This should work w/o an issue as long as the `card` class has a fixed height, what's the problem and are you receiving any errors? cdkVirtualFor expects a set height for each row and virtually scrolls them with lazy loading regardless of what is actually in them. – Z. Bagley Feb 28 '20 at 13:38
  • there is no errors, its just that without the virtual scroll i have wrap list scroll with 5 cards each row, and in the virtual scroll i cant have more then 1 card in a row. – user6384585 Feb 28 '20 at 17:38
  • You can calculate # of items per row, and reduce your item size by that number (card height of 200 w/ 5 cards per row is 200 / 5 = item size 40) – Z. Bagley Feb 28 '20 at 18:01

0 Answers0