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.

Attributes

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.

am_virtualrepeat.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

         .vrepeatContainer #vertical-container {
            height: 292px;
            width: 400px; 
         }

         .vrepeatContainer .repeated-item-horizontal {
            border-right: 1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            height: 84px;
            padding-top: 35px;
            text-align: center;
            width: 50px; 
         }

         .vrepeatContainer .repeated-item-vertical {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            height: 40px;
            padding-top: 10px;
         }

         .vrepeatContainer md-content {
            margin: 16px; 
         }
         
         .vrepeatContainer md-virtual-repeat-container {
            border: solid 1px grey; 
         }	  
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('vrepeatController', vrepeatController);
           
         function vrepeatController ($scope) { 
            this.items = [];
            for (var i = 0; i < 1000; i++) {
               this.items.push(i);
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
         ng-cloak>
         <md-content layout = "column">
            <h2>Horizontal Repeat</h2>
            <md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-horizontal" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
            <h2>Vertical Repeat</h2>
            <md-virtual-repeat-container id = "vertical-container">
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-vertical" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
         </md-content>
      </div>
   </body>
</html>

Output:

Example 2:

app.module.html

<div class="app-wrapper" ng-app="myapp">
  <h1>Virtual Repeat</h1>
  <h4>using angular material</h4>
  <div ui-view></div>


  <!-- TEMPLATES (MUST BE IN APP CONTEXT) -->
  <script type="text/ng-template" id="home.html">
    <md-button ng-click="vm.toggle()">
      showing {{vm.dataset.getLength()}} items
      of {{vm.items.length}}  ({{vm._toggle}})
    </md-button>
      
    <md-virtual-repeat-container>
      <p md-virtual-repeat="item in vm.dataset" md-on-demand="{{vm.onDemand}}">{{item.value}}</p>
    </md-virtual-repeat-container>
  </script>
  <script type="text/ng-template" id="about.html">
    <h3>About Page</h3>
  </script>
</div>

app.component.ts

(function() {
  var app = angular.module('myapp', ['ngMaterial', 'ui.router']);
  app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: [function() {
          var self = this;
          self.items = [];
          for (var i = 1; i <= 1000000; i++) {
            self.items.push({
              value: i
            });
          }
          self.onDemand = true;
          self.dataset = {
            _items: [],
            _refresh: function(data) {
              this._items = data.filter(function(el) {
                return !angular.isDefined(el._excluded) || el._excluded === false;
              })
            },
            getItemAtIndex: function(index) {
              return this._items[index];
            }, //getItemAtIndex
            getLength: function() {
              return this._items.length
            } //getLenth
          }; //dataset
          
          self.dataset._refresh(self.items);
          
          self._toggle = 1;
          self.toggle = function() {

            if (!self._toggle) {
              self._toggle = 2;
            } else if (self._toggle < 8) {
              self._toggle += 1;
            } else {
              self._toggle = 1;
            }
            for (var i = 0; i < self.items.length; i++) {
              self.items[i]._excluded = (self.items[i].value % self._toggle !== 0);
            }
            
            self.dataset._refresh(self.items);
          }
        }],
        controllerAs: 'vm'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'about.html'
      });

  });

}());

app.component.css

md-virtual-repeat-container {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
  border: solid 1px #ccc;
  padding: 10px;
}

Output:

Next TopicAngular Material Flipping Card

← prev next →

Latest Courses

We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[email protected].

Frontend

Data Analytics

Database

Online Compiler

Backend

Technical Interview

Java Interview

Web Interview

Database Interview

Company Interviews