MdSelect and MdAutocomplete slow initial render w/ large number of options

[jelbourn]

For both MdSelect and MdAutocomplete, the initial render of the component (in the closed state) is very slow even though the panels are closed. We should ensure that any work related to the options is deferred until the panel is opened.

To reproduce this, simply modify the demos to render 500 md-select each with 500 options each (there is no problem if there are 500 selects with 1 option each).

[jelbourn]

@crisbeto I think we should tackle this the same way we're dealing with tabs- to add an additional API where the options are in an ng-template so that they aren't eagerly instantiated. Thoughts?

[crisbeto]

Makes sense, I'll see what I can do.

[crisbeto]

@jelbourn I did some exploration into it. The problem with using an ng-template is that we count on the individual options to provide their text which we then use to display inside the trigger. Since they're not in place on load, it means that we won't be able to show the trigger text for preselected options until the first open. We could do something where the user provides the text, but it won't be very elegant.

[jelbourn]

We could add an extra API to the trigger for that case; the trade-off ends up being simplicity vs performance

[crisbeto]

We do have the mat-select-trigger component already which lets you override the trigger.

[jelbourn]

Thinking about it more, perhaps we need to go the route we took with the table here. Something like

<mat-select-trigger [panel]="panel">
  {{panel.selectedOption.name}}
</mat-select-trigger>

<mat-select-panel #panel [dataSource]="myOptions">
  <mat-option *matOptionDef="let option; when">{{option.name}}</mat-option>
</mat-select-panel>

It's a pretty dramatic departure from the current API- maybe we consider this for the next major release and instead say that lazily instantiated option-lists need to be explicitly given trigger text.

[crisbeto]

An alternative approach can be to hand over all rendering to Material. e.g. the user provides the data source and a function that determines what the output should look like:

<mat-select [options]="arrayOfOptions" [displayWith]="functionThatReturnsAString"></mat-select>

[jelbourn]

The issue there is that you lose the ability to custom-template the options. Even with the datasource approach you lose the ability to control how the options are expanded declaratively, but that might be a reasonable trade-off (we decided it was necessary for the table so it could have control over scrolling)

[ovoronin]

I have such error for every item in mat-select

zone.js:1666 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event.

This #4221 (comment) helps, and the performance is much better (I have 900 items list)

[naveedahmed1]

Any update on this?