Ng-repeat v / s md-virtual-repeat

Question

Difference between angular ng-repeat and angular material md-virtual-repeat?

When should I use this or that?

Answer 1

ng-repeat displays all the items in the list that are less efficient in large lists.

md-virtual-repeat displays the list that is visible on the viewport, it does not display all the elements of the list when the user scrolls in the case of large lists, then it still displays other elements, so its executor should be used when working with large lists.

Answer 2

Angular documentation says this quite clearly:

Virtual repeat is a limited replacement for ng-repeat, which only displays sufficient dom nodes to fill the container and reuse them as custom scrolls. Arrays but not objects are supported for iteration. The syntax track "alias" and (key, value) are not supported.

A source

Answer 3

md-virtual-repeat is similar to ng-repeat , but very useful when you want to load a large amount of data.

Suppose you need to upload 100,000 records. In this case, if it is ng-repeat , then it will load all the data first. Thus, the user may get frustrated during the download. If the user wants only the first 50 rows of data, ng-repeat makes him wait until all 100,000 records are loaded!

To avoid this in the material, we have md-virtual-repeat . It loads the next data set when there is demand for it (user scrolls more data)

Ultimately, the load time is optimized if you use md-virtual-repeat .

Answer 4

The ngRepeat directive creates an instance of the template once for an element from the collection. Each instance of the template gets its own area, where the specified loop variable is set to the current element of the collection, and $ index to the index of the element or key. A source

ng-repeat loads the entire data set before displaying it in the user interface. This is extremely useful when working with a smaller list. To ensure that it is most effective, it is recommended that you use the track according to the ng-repeat expression and / or limit it. A great example of an md-data-table that uses ng-repeat is Daniel Nadia's table

With a large list of entries, ng-repeat gets a lot slower. If it is slow, md-virtual-repeat recommended.

md-virtual-repeat indicates the item to repeat using virtual scrolling. Virtual repeat is a limited ng-repeat substitute that only displays sufficient DOM nodes to fill the container and reuse them as custom scrolls. A source

md-virtual-repeat only loads data on demand - the user scrolls. It loads data much faster with a large set of results! md-virtual-repeat becomes cumbersome when pasted into a table. If you google it , there are many errors when using it with a table.

Ultimately, ng-repeat is the best supported use. My personal goal is not to use md-virtual-repeat when there are large datasets, but rather try to filter out unnecessary lines or use pagination.