CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangular-material
user3802040
user3802040

Reputation: 117

ng-repeat v/s md-virtual-repeat

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

When should i use one or another?

Upvotes: 5

Views: 2773

Answers (4)

Max Pringle
Max Pringle

Reputation: 639

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key. Source

ng-repeat loads the entire data set before rendering to the UI. It is extremely useful when dealing with a smaller list. To ensure that it is most effective it is advisable to use track by and or limit to in the ng-repeat expression. A great md-data-table example that uses ng-repeat is Daniel Nagy's table

With a large list of records ng-repeat becomes very much slower. If it is slow the recommended usage is to switch to md-virtual-repeat

md-virtual-repeat specifies an element to repeat using virtual scrolling. Virtual repeat is a limited substitute for ng-repeat that renders only enough DOM nodes to fill the container and recycling them as the user scrolls. Source

md-virtual-repeat only loads the data on demand - the user scrolls. It loads the data much quicker when having a large result set. md-virtual-repeat becomes cumbersome when inserting it into a table.

Upvotes: 0

Balaji Ganesan
Balaji Ganesan

Reputation: 41

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

Consider you have to load a 100,000 records. In this case if it is ng-repeat then it will load all the data initially. So the user may get frustrated while it is loading. If the user wants the first 50 rows of data only, ng-repeat forces him to wait until all 100,000 records load!

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

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

Upvotes: 2

Zeeshan Hassan Memon
Zeeshan Hassan Memon

Reputation: 8325

ng-repeat renders all elements in list, its less performant on large lists.

md-virtual-repeat renders list what is visible on viewport, it doesn't render all elements of list, when user scrolls in case of large lists it then seemlesly renders other elements, this way its performant and should be used when working with large lists.

Upvotes: 6

prtnkl
prtnkl

Reputation: 302

Angular documentation tells it pretty clearly:

Virtual repeat is a limited substitute for ng-repeat that renders only enough dom nodes to fill the container and recycling them as the user scrolls. Arrays, but not objects are supported for iteration. Track by, as alias, and (key, value) syntax are not supported.

Source

Upvotes: 5

Related Questions