docs
Menu
Menu

Angular Integration

Below, we show you how to use ZingGrid in your AngularJS project.

On This Page

Usage

Include the following dependencies in the header of your HTML file:

CloseCopy Copied
<script src="path/to/zinggrid.min.js" defer></script>

Import Angular component:

CloseCopy Copied
import { Component } = '@angular/core';

Create a ZingGrid component:

CloseCopy Copied
@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:

CloseCopy Copied
<my-component></my-component>

Example

Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

On This Page

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading