AngularJS Integration

ZingGrid works with your development stack, including AngularJS! In this guide, we'll walk you through how 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, like so:

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

3. Create a ZingGrid component with a controller for data, like so:

   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, like so:

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

AngularJS Integrated Grid

Here is our complete grid that is successfully integrated with AngularJS: