Docs

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>
  1. Define the AngularJS application:
var app = angular.module('myApp', []);
  1. 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.

  1. Display your app and new component:
<div ng-app="myApp">
  <my-grid></my-grid>
</div>

Example

Top

On This Page