md-autocomplete: scroll event for pagination

[francois-appliware]

Bug, feature request, or proposal:

This is a feature request - proposal:
Add a way to let us know when the autocomplete has scrolled to the end to enable pagination in the autocomplete component (kind of an infinite scrolling).

Something like:

<md-input-container>
   <input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete" (scrolled)="loadMoreData()">
   <md-option *ngFor="let option of options" [value]="option">
      {{ option }}
   </md-option>
</md-autocomplete>

loadMoreData being a custom method in the component.

What is the expected behavior?

• The user types in something
• The autocomplete shows a list of filtered items (from http call)
• The user scrolls all the way down
• The autocomplete gets appended items thanks to another http call (that is made because the autocomplete fired some kind of (scrolled) event)

What is the current behavior?

• The user types in something
• The autocomplete shows all the items at once.
• The user scrolls all the way down
• nothing

What is the use-case or motivation for changing an existing behavior?

I have some http request to fill the autocomplete and filter them. Some of those list contains thousands of items. I can't just show them all.

Which versions of Angular, Material, are you using?

Angular: 4.1.3,
Angular/material: 2.0.0-beta.6

Is there anything else we should know?

I don't know if this is already planned, or if it is already doable with another component. I don't think so and I can't seem to find anything related to that.
The closest would be a virtual repeat maybe ? But that would not answer the problem server side (sending everything at once).
I used to have a directive that would do the (scrolled) event, but it doesn't work here. I think because the items are in fact somewhere else in the overlay-container thingy.

Cheers !

[willshowell]

While you're waiting for an official response, you can still get to the scroll event via the panel's native element:
https://plnkr.co/edit/cdHjcjSpGUOt8Ehg0PfY?p=preview

[francois-appliware]

Thanks for the plunker, this will indeed help me for now !

[jelbourn]

This isn't something we plan on adding, but we will eventually support virtual scrolling.

[we125182]

@willshowell thank you for your help! the plunker is really help me a lot.

[ashutoshbibyan]

i am looking for the same thing in mat-select can you help me to do the same functionality in mat-select

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}