Home » Angular Material Virtual Repeat

Angular Material Virtual Repeat

by Online Tutorials Library

Angular Material – Virtual Repeat

The md-virtual-repeat-container is a scroll container fork md-virtual-repeat component.

Virtual repeat is an Angular material directive which is same as ng-repeat and it renders html elements to fill the container to reuse it when the user scrolls.


The below table lists the parameters and description of the attributes of md-virtual-repeat-container.

Sr.No Parameter Description
1 md-top-index The scroll binds the index of the item containing $ scope at the top of the container. It sets the scroll position.
2 md-orient-horizontal It determines the container should scroll horizontally.
3 md-auto-shrink When that number is less than its original size, the container will shrink to fit the number of items.
4 md-auto-shrink-min The minimum number of items that will shrink for md-auto-shrinkage (default: 0).
5 md-item-size It modifies height or width of repeated elements. It is optional. It tries to read the size from the DOM if missing but still believes that the height or width of the replicated nodes is the same.
6 md-extra-name Evaluates an additional name, which can be assigned to the current iterated item on a repeated scope (required for use in md-autocomplete).
7 md-on-demand md-on-demand is an virtual-repeat-argument as an object that fetch rows instead of an array. The object can implement the below interface with two methods –
getItemAtIndex – If it is not yet loaded, the item at that index or zero.
getLength – The data length in which the repeater should be the size of the container. When the count is known, this method should return it. Otherwise, return a greater number of currently loaded objects to produce infinite-scroll behavior.

Example 1:

The below example shows the use of virtual repeat.



Angular Material Virtual Repeat

Example 2:





Angular Material Virtual Repeat

You may also like