---
title: "Angular & AngularJS Integration | Docs"
description: "See how to integrate ZingGrid into your Angular/AngularJS project with instructions and an example implementation."
url: https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/angular
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/integrations/js-frameworks-&-libs/angular.md
mode: provenance
representation: markdown
origin_response_id: e97861c8b6b0b9cc4a7f5275529caf94
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.727Z
version_nonce: f87752d25554a04eeead6213e2a7232d
generated_at_utc: 2026-11-05T00:50:44.344Z
response_nonce: ae38dc6b1a4bc1a2362da89d7e8373a9
```

# 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:

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

2. Import an Angular component, like so:

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

3. Create a ZingGrid component, like so:

    ```javascript
    @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:

    ```javascript
    <my-component></my-component>
    ```

### Angular Integrated Grid

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

[zinggrid-angular-template](https://codesandbox.io/embed/zinggrid-angular-template-o5tgr?fontsize=14&hidenavigation=1&theme=dark)

## AngularJS Integration

ZingGrid works with your development stack, including AngularJS! In this guide, we'll walk you through how to add ZingGrid to your AngularJS project.

## Usage

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

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

2. Define the AngularJS application, like so:

    ```javascript
    var app = angular.module('myApp', []);
    ```

3. Create a ZingGrid component with a controller for data, like so:

    ```javascript
    app.component('myGrid', {
      template: '',
      controller: MyController
    });

    function MyController($scope, $element, $attrs) {
      this.dogs = [
        {
          "breed": "Dachshund",
          "name": "Sausage"
        },
        {
          "breed": "Corgi",
          "name": "Plop"
        },
        {
          "breed": "Pomeranian",
          "name": "Floof"
        }
      ];
      $scope.$evalAsync(() => {
        const zgRef = document.createElement('zing-grid');
        zgRef.setAttribute('caption', 'Hello Doggos');
        zgRef.setAttribute('data', JSON.stringify(this.dogs));
        $element.append(zgRef);
      });
    }
    ```

> **Note:** Note: Need to pass in the data to your component? [View our demo](https://app.zingsoft.com/demos/embed/X2KK1S1H).

4. Display your app and new component, like so:

    ```html
    <div ng-app="myApp">
      <my-grid></my-grid>
    </div>
    ```

### AngularJS Integrated Grid

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

[Example code](https://app.zingsoft.com/demos/embed/JH6QN820)