Questions tagged [angular-cdk-virtual-scroll]

81 questions
0
votes
1 answer

angular cdk virtual viewport setting dynamic height

When using the cdk virtual viewport, need to set the height of the viewport .example-viewport { height: 800px; width: 100%; border: 1px solid black; }
rodent_la
  • 781
  • 1
  • 11
  • 29
0
votes
0 answers

Angular cdkVirtualFor not working well with ViewChildren, QueryList has 6 items

I'm using cdkVirtualFor in my app to handle large amounts of data instead of the traditional *ngFor. I need to add a class to a certain element which I have the index of in the main postsList This is the HTML:
  • Alex
    • 1,836
    • 3
    • 33
    • 60
  • 0
    votes
    0 answers

    Proper use of Virtual Scrolling with Angular Material and mat-tables?

    Alright, so recently I've been trying to migrate some of my table functionality over to using virtual scrolling, simply because the DOM is being bogged down with hundreds of nodes all at once with large data sets. That being said, I was just going…
    0
    votes
    0 answers

    How to handle large selection for copy-paste in angular material virtual scroll?

    I have large dataset(60000+) for angular material virtual scroll The scrolling is working but the problem is when I want to copy large section while scrolling down/up, virtual scroll will destroy the elements which are not in the view anymore, that…
    0
    votes
    1 answer

    Add an Item to a cdkVirtualFor

    I am using a cdkVirtualFor due to a large number of users in my list. The list has filtering on it and it works much better when it is a cdkVirtualFor rather than a regular *ngFor. I now need to add items to the list…
    Bwizard
    • 723
    • 8
    • 18
    0
    votes
    0 answers

    Fixing 1st column inside table with cdk virtual scroll

    I have a table with tbody and various and cells. I have implemented CDK Virtual scroll because of many rows. I have to freeze the 1st column with horizontal scroll and my horizontal scroll is on cdk component container rather than inside tbody or…
    0
    votes
    0 answers

    cdk virtual scrolling with sticky header html table angular

    I am getting more than 30000 records from backend to list in frontend, So using cdk-virtual-scroll I can able to achieve this. I have created normal table enclosed with cdk-tag
    Kavya Shree
    • 882
    • 1
    • 12
    • 45
    0
    votes
    0 answers

    How to detected when user stop scrolling with Virtual Scroll - Angular 9

    I want to display a message when the user stop scrolling with the Virtual Scroll. I tried the following approach, but the message i want to display never appear when i stop scrolling. this.scrollDispatcher.scrolled().pipe( tap(() => this.scroll =…
    Kivo
    • 317
    • 5
    • 19
    0
    votes
    1 answer

    Angular virtual scroll: prepend new items when new data streams in with Microsoft SignalR

    Currently I'm using Microsoft SignalR for live updates on my data and whenever new data comes in, I would like it to be added to the existing virtual list while removing that entry from where it was. Essentially how do you unshift with virtual…
    0
    votes
    0 answers

    Using variables inside cdk-virtual-scroll-viewport brakes virtual scroll

    I need to put some blocks inside cdk-virtual-scroll-viewport and access this blocks outside of viewport. When i am doing that the virtual scroll is…
    Kiko
    • 43
    • 1
    • 6
    0
    votes
    0 answers

    Angular virtual scroll with sticky column and header

    I have a big list of data and I want to display it in a grid, but I don't want to display the whole list as it will be too much stuff on screen and be slow. I want to use a virtual scroll but I want to have the header and the first column to be…
    0
    votes
    1 answer

    position:fixed doesn't work inside cdk-virtual-scroll-viewport

    HTML element with position:fixed doesn't work inside cdk-virtual-scroll-viewport. Below style should put the element at the page top left corner, but this class doesn't apply to elements inside cdk-virtual-scroll-viewport. .fixed-div {position:…
    V_R
    • 56
    • 6
    0
    votes
    2 answers

    Performance issue with selecting a checkbox in HTML table with 1000+ rows

    We have a simple HTML table with tr td combination . The table has 65 columns to it and it will have minimum of 1000 rows and it could be more as well. We are seeing a huge performance issue when selecting a checkbox in a row, it takes around 3-4…
    Nikhil Bharadwaj
    • 701
    • 2
    • 15
    • 36
    0
    votes
    0 answers

    CDK Virtual scroll weird behavior on checking the width of table

    I have user angular material's CDK virtual scroll for virtual. The virtual scroll fetches values of table data from a function. In the end of function I check the width of table which is inside virtual scroll by…
    0
    votes
    1 answer

    Make sort work with CdkVirtualFor and templateCacheSize

    I have implemented CdkVirtualForOf on a list in Angular, and set its templateCacheSize to 150 to improve perfomance. But when I sort my data and scroll, the cached templates screws up the items in the view. In other words: I sort the data, and the…
    MartinJH
    • 2,460
    • 5
    • 31
    • 44