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

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

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

2. Import an Angular component, like so:

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

3. 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"}
     ];
   }

4. Display your new component, like so:

   <my-component></my-component>

Angular Integrated Grid

Here is our complete grid that is successfully integrated with Angular: