Angular Material - Angular Material Virtual Repeat - Angular Material Tutorial



What is Virtual Repeat in Angular Material?

  • 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.
  • angular material tutorials - virtual repeat functionality

    angular material tutorials - virtual repeat functionality Example

  • md-virtual-repeat-container is the scroll container for the md-virtual-repeat component.
Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular

Attributes - md-virtual-repeat-container

Sr.No Parameter & Description
1

md-top-index

Binds the index of the item that is at the top of the scroll container to $scope. It can both read and set the scroll position.

2

md-orient-horizontal

Determines whether the container should scroll horizontally (defaults to orientation and scrolling vertically).

3

md-auto-shrink

When present, the container will shrink to fit the number of items when that number is less than its original size.

4

md-auto-shrink-min

Minimum number of items that md-auto-shrink will shrink to (default: 0).

md-virtual-repeat

  • Virtual repeat is a substitute for ng-repeat to renders only enough html elements to fill the container and reuse them when the user scrolls.
  • Attributes

  • The following table lists out the parameters and description of the different attributes of md-virtual-repeat.
  • Sr.No Parameter & Description
    1

    md-item-size

    The height or width of the repeated elements (which must be identical for each element). This is optional. This attempts to read the size from the dom if missing, but still assumes that all repeated nodes have same height or width.

    2

    md-extra-name

    Evaluates to an additional name to which the current iterated item can be assigned on the repeated scope (needed for use in md-autocomplete).

    3

    md-on-demand

    When present, treats the md-virtual-repeat argument as an object that can fetch rows rather than an array.This object must implement the following interface with two (2) methods −

    • getItemAtIndex − function(index) [object] - The item at that index or null if it is not yet loaded (it should start downloading the item in that case).

    • getLength − function() [number] - The data length to which the repeater container should be sized. Ideally, when the count is known, this method should return it. Otherwise, return a higher number than the currently loaded items to produce an infinite-scroll behavior.

    Example

    • The following example showcases the use of virtual repeat.
    <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>
    
    Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy angular material tutorial , angular 4 material , angular material2 , angular material example team
    Related Tags - angular material , angular 2 material , angular material 2 , angular material design , material angular

    Output:


    This tutorial provides most of the basics of all the below related informations such as angular material design , material design angular , angular material table , angularjs material , material angular , angular material icons , angular 2 material design , angular material template , angular materialize , angular material theme , angular material layout , material design angular 2 , angular material demo , angular material dialog , angular material form , angular material button , material angular 2 , angular material datepicker , angular material data table , angular material tutorial , angular material login form , material for angular 2 , angular material data grid , material ui angular , angular material calendar , angular material design table , angular material grid , google angular material , angular material components , angular 2 material ui , angular material autocomplete example , material ui angular 2 , angular material 2 demo , angular2 material demo , angular material template free , angular material design tutorial , angularjs material tutorial , material design for angular 2 , angular material tabs example , angular material ui , table angular material , angular material angular 2 , angular material layout align , what is angular material , angular material tabs , angular2 material example , angular 2 material tutorial , angular material login page , angular 2 material demo , angular material cdn , angular material design example , angularjs material design template , material angularjs , angular material grid list , angular material search bar , angular material vs bootstrap , angular material js , angular material range slider , angular material sidenav example , angular material form example , material angular icons , angular material datepicker example , angular material design icons , angular material design template , angular material bootstrap , materialize angular , angular material template free download , bootstrap material design angular , angular material table example

    Related Searches to Virtual Repeat | Angular Material Virtual Repeat