Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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).

Issue Analytics

State:
Created 6 years ago
Reactions:21
Comments:23 (12 by maintainers)

Top GitHub Comments

4reactions

timharris777commented, Jan 5, 2018

I’m running into this same issue with Select and cannot find a workaround. If I have 100s of select options the view hangs on load (setting values in onInit). Anyone found a workaround?

2reactions

Harpushcommented, Aug 22, 2021

Any news on this?

Top Results From Across the Web

Directives > mdAutocomplete - AngularJS Material

Parameter Type Description md‑search‑text expression expression A model to bind the search query text to. md‑selected‑item object object A model to bind the selected item...

mat autocomplete is too slow while loading large data

I was in the same situation and my solution was to limit the list to first N results. So the code looks like...

Improving render of Angular material select and autocomplete ...

This helps up in displaying large lists of elements performantly by only rendering the items that fit on-screen. Loading hundreds of elements ...

Angular Material - Quick Guide - Tutorialspoint

The md-autocomplete, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a...

Supplement other js/css files · 8f7db83c5c - xstatic-angular ...

AngularJS-Material-Mocks. *. * Developers interested in running their own custom unit tests WITH angular-material.js loaded.