docs
Menu
Menu

AngularJS Integration

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

On This Page

Usage

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

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Define the AngularJS application:

CloseCopy Copied
var app = angular.module('myApp', []);

Create a ZingGrid component with a controller for data:

CloseCopy Copied
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.

Display your app and new component:

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

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

On This Page

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading