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>
  2. Define the AngularJS application:

    var app = angular.module('myApp', []);
  3. 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.

  4. Display your app and new component:

    <div ng-app="myApp">



On This Page