AngularJS Integration

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


  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));

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

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



On This Page