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:
Top
[integrations: angular]