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
Include the following dependencies in the header of your HTML file:
<script src="path/to/zinggrid.min.js" defer></script>
Define the AngularJS application, like so:
var app = angular.module('myApp', []);
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.
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:
Top
[integrations: AngularJS]