Angular Integration
ZingGrid works with your development stack, including Angular! In this guide, we'll walk you through how to add ZingGrid to your Angular project.
Usage
-
Include the following dependencies in the header of your HTML file:
<script src="path/to/zinggrid.min.js" defer></script>
-
Import an Angular component, like so:
import { Component } = '@angular/core';
-
Create a ZingGrid component, like so:
@Component({ selector: 'my-component', template: '<zing-grid caption="Hello World"></zing-grid>', }) class MyComponent { datastore = [ { "breed": "Chow Chow", "name": "Butter"}, { "breed": "Dachshund", "name": "Sousage"}, { "breed": "Pug", "name": "Potat"}, { "breed": "Corgi", "name": "Plop"}, { "breed": "Pomeranian", "name": "Floof"} ]; }
-
Display your new component, like so:
<my-component></my-component>
Angular Integrated Grid
Here is our complete grid that is successfully integrated with Angular:
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:
[integrations: angular]