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>
  2. Import Angular component:

    import { Component } = '@angular/core';
  3. 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"}
      ];
    }
  4. Display your new component:

    <my-component></my-component>

Example

Top

On This Page