Material: md-list + infinite scroll capability

[maksimlikharev]

I see more and more interesting controls got added to material design.

I'm pitching again for properly done infinite scrolling list in the context of angular materials, looks like
the only known to me and somewhat correctly made infinite list is Polymer core-list, ng side needs such functionality too.

It has to be windowing, that is produce just enough DOM elements to cover display area + gaps and reused on scroll.
It has to have proper async data delivery.
It has to have rendering templates.
It should have selection management.
It has to be reactive and fast.

I can contribute my time if there is initial framework available.

[madvas]

:+1: Agree! I was going to write here very similar thing today ;)

[ilanbiala]

I can put together a PR for ngMaterial if this will be merged in. @ThomasBurleson @rschmukler thoughts?

[robdefeo]

Is there an update on this one?

[robdefeo]

I have noticed it does not work when using md-scroll-shrink in md-toolbar it appears not to fire the infinite scroll

[maksimlikharev]

any chance to play with the code, if it somewhat ready?

[csvan]

Any new on this? It is a badly needed feature

[ru-sh]

+1

[gpopovic]

+1

[sckoh]

+1

[Clan-Utility]

+1
Btw, is there a guideline for pagination in material design?

[ThomasBurleson]

Here is an CodePen Demo of a scrolling list with 100K rows; using md-virtual-repeat. While this is not infinite scroll, it does deliver performance and features for large lists.

The md-virtual-repeat component is available with v0.10.1-rc1 or greater

[ThomasBurleson]

If anyone is interested, a Pull-Request for infinite scroll would be welcome. The core team is focused on critical features required for v1.0 release.

[DallanQ]

This is working great! Thank-you for adding it. My only question is I can't figure out how to flex the container to take the full height of the parent. I'm currently setting the height using javascript and listening to the window.resize event. That's working fine; I'm just wondering if there is an easier way.

[oharlem]

+1
There's currently no good virtual scroll angularjs component around that would allow non-container scrolling (a-ls Facebook and LinkedIn). Would be great to get one as part of the Material Design family!

[ThomasBurleson]

@kseamon - Referring to CodePen Demo, it appears that we must explicitly set the mdVirtualRepeatContainer height in CSS or JS.

Why does the container not calculate its size if I add a flex attribute (and remove the explicit height size)?
e.g. <md-virtual-repeat-container id="vertical-container" flex>

[kseamon]

@ThomasBurleson I'd have to look into it, but it's probably a timing issue (e.g. the offsetHeight is not updated until after the container tries to read it. I'll need to add in some code that continues trying to get the height until it finds a non-zero value. Unfortunately this can be pretty costly, but there's probably no way around it.

[kseamon]

Also, see https://github.com/angular/material/issues/3416 (The gist is that I have some ideas for adding infinite scroll to md-virtual-repeat). @ThomasBurleson: Would we like to prioritize this higher than, say, incorporating virtual repeat into select and menu?

[DallanQ]

As long as we're asking for things :-), if the virtual scroller could use the page scrollbar somehow, like google inbox and contacts, that would be wonderful. I think that's a better UX than having a separate scrollbar.

[kseamon]

https://github.com/angular/material/pull/4002

[kseamon]

@ThomasBurleson Now that infinite scroll is landed in virtual-repeat, are we good to close this issue?

[italoayres]

I think virtual-repeat is great, but a bit diferent of what infinite scroll directive proposes.
To me, it should be more like what was done on the Ionic framework
see example (plunkr)
and yet, another example (codepen)

// Adapting to ngMaterial
<md-list></md-list>
<md-infinite-scroll 
  on-infinite="loadMoreData()"
  distance="1%">
</md-infinite-scroll>

I found it quite simple, what do you guys think?

[nakedcity]

+1

[dbkaplan]

+1

[MrPro100]

+1

[JakubKrizka]

+1 :+1:

[jjohanning]

+1

[hanford]

+1

[tsareg]

Is there any news regarding applying flex attribute to md-virtual-repeat-container?

[alejandromagnorsky]

+1

[GabrielStetco]

+1

[mackelito]

+1

[smurugavel]

+1

[ericwangqing]

+1

[vamsikrishnamannem]

+1

[simonered]

No news?? Flex container is absolutely necessary.

[adam-s]

+1

[simonered]

Why is this closed? Please, reopen it or open an issue for flex in md-virtual-repeat-container.

[adam-s]

If configured correctly, ng-infinite-scroll works with Angular Material design.

        <md-content flex layout="column" tabIndex="-1" role="main" class="main">
            <div class="top md-whiteframe-z1"
                 infinite-scroll="vm.nextPage()"
                 infinite-scroll-container="'.main'"
                 infinite-scroll-disabled="vm.working"
                 infinite-scroll-distance="1">
                <md-list flex>
                    <md-list-item>
                    </md-list-item>
                    <md-list-item>
                    </md-list-item>
                    <md-list-item>
                    </md-list-item>
                </md-list>
            </div>
        </md-content>

Notice how the scroll container is the <md-content> container?

(function() {
    angular.module('ohboy')
        .controller('TopCtrl', TopCtrl);

    TopCtrl.$inject = ['$mdDialog', 'TopSrv'];

    function TopCtrl($mdDialog, TopSrv) {
        var vm = this;
        var page = 1;
        var number = 20;


        vm.working = false;
        vm.counterfolds = [];
        vm.nextPage = nextPage;
        vm.openFullScreen = openFullScreen;

        TopSrv.fetchTop(page, number)
            .then(function(response) {
                console.log(response);
                vm.centerfolds = response;
            });

        function nextPage() {
            if (vm.working) return;
            vm.working = true;
            page++;

            TopSrv.fetchTop(page, number)
                .then(function(response) {
                    if (response.length) {
                        vm.counterfolds = vm.counterfolds.concat(response);
                        console.log(vm.counterfolds);
                        vm.working = false;
                    }
                })
        }
    }
})();

It would be great if it was a core feature but this works for me.

[yuanstanley]

@adam-s would you mind putting up a plunkr? For some reason can't seem to get your example code to work.

[mugwag]

@adam-s AMAZING thank you so much. (if you are following this code make sure you reference the class or ID of the md-content element, ie infinite-scroll-container="'#main_content'" )