angular
feat(mat-tab): mat-tab-body infinite scroll content
Feature Description
I have a situation and I would like to know if there is a way to do it or something that supports it. Today I use mat-tab and inside it I render several things, I even have a request screen as shown in the image below, where there is a table and its height is dynamic. So I would like to find a way to infinitely scroll the elements inside this mat-tab. maybe the question seems a bit illogical. But it analyzes that the table inside the mat-tab cannot have a fixed size, it has to be dynamic. This table can have multiple rows, and each row has multiple input, autocomplete, etc. In some of the tests that I did the memory consumption is very high. If you have a different idea or approach, please suggest it, as I need to find a solution.
Use Case
No response
@GlauberF Is this something that could be solved by using the virtual scroller? https://material.angular.io/cdk/scrolling/overview
@wagnermaciel So I don't know how to solve using scrolling. because the scroll does not happen in the table, but in the content of the mat-tab.
Could you provide a stackblitz example of the issue? I'm having trouble understanding the root cause of this problem
Sorry for the delay in responding.
A simplified example follows. link: https://stackblitz.com/edit/angular-formly-table?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fdirectives%2Fintersection-observer.directive.ts
You can see that I have a mat-tab and inside I have content as a normal paragraph, plus the table that renders the components per line. In this scenario it's two simple inputs per line, but in the real scenario, it's multiple components per line causing rendering to stutter.
In this example I even applied an idea of using an observable(IntersectionObserver) for each table row, where it only shows/renders the components when the table row is visible on screen and hides it when it is not. However, in production, this creates a bottleneck for rendering the line, as there are several components on that line that need to be rendered at the moment the IntersectionObserver says that line is visible on the screen.
Because I believe that maybe a virtual scroll or something similar could solve it, but I have no idea how to do it. All help is welcome.
Note: I could set the height of the table and put a virtual scroll on it, but the client doesn't want it, he needs the height to be dynamic.
Note 2: I tested using Lazy Loading with mat-tab, but when it's only one tab, little difference is noticed, when there's more than one tab, when clicking on the second delay to make the switch, because it's assembling/rendering the components of the other tab.