Docs

Angular Integration

Below, we show you how to use ZingGrid in 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>
  1. Import Angular component:
import { Component } = '@angular/core';
  1. Create a ZingGrid component:
@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"}
  ];
}
  1. Display your new component:
<my-component></my-component>

Example

Top

On This Page