AngularJS Integration

Follow the steps below to add ZingGrid to your AngularJS project!

Usage

  1. Include the following dependencies in the header of your HTML file:

    <script src="path/to/zinggrid.min.js" defer></script>
  2. Define the AngularJS application:

    var app = angular.module('myApp', []);
  3. Create a ZingGrid component with a controller for data:

    app.component('myGrid', {
      template: '',
      controller: MyController
    });
    
    function MyController($scope, $element, $attrs) {
      this.dogs = [
        {
          "breed": "Dachshund",
          "name": "Sausage"
        },
        {
          "breed": "Corgi",
          "name": "Plop"
        },
        {
          "breed": "Pomeranian",
          "name": "Floof"
        }
      ];
      $scope.$evalAsync(() => {
        const zgRef = document.createElement('zing-grid');
        zgRef.setAttribute('caption', 'Hello Doggos');
        zgRef.setAttribute('data', JSON.stringify(this.dogs));
        $element.append(zgRef);
      });
    }

    Note: Need to pass in the data to your component? View our demo.

  4. Display your app and new component:

    <div ng-app="myApp">
      <my-grid></my-grid>
    </div>

Example

Top

On This Page