• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
    
      <!-- link for angular -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js"></script>
      <script src="https://unpkg.com/@angular/core@6.0.5/bundles/core.umd.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"></script>
      <script src="https://unpkg.com/@angular/common@6.0.5/bundles/common.umd.js"></script>
      <script src="https://unpkg.com/@angular/compiler@6.0.5/bundles/compiler.umd.js"></script>
      <script src="https://unpkg.com/@angular/platform-browser@6.0.5/bundles/platform-browser.umd.js"></script>
      <script src="https://unpkg.com/@angular/platform-browser-dynamic@6.0.5/bundles/platform-browser-dynamic.umd.js"></script>
    
      <!-- import zinggrid file -->
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    
      <style>
        body {
          background: #FFF;
        }
    
        zing-grid[loading] {
          height: 800px;
        }
      </style>
    </head>
    
    <body>
    
      <!-- grid component -->
      <my-component></my-component>
    
      <!-- script containing Angular code -->
      <script type="text/typescript">
        window.onload = () => { const { Component } = ng.core; @Component({ selector: 'my-component', template: '
        <zing-grid caption="Hello Doggos" data={{dogs}}></zing-grid>', }) class MyComponent { dogs = `[ { "breed": "Dachshund", "name": "Sousage"}, { "breed": "Corgi", "name": "Plop"}, { "breed": "Pomeranian", "name": "Floof"} ]`; } const { BrowserModule } = ng.platformBrowser; const { NgModule, CUSTOM_ELEMENTS_SCHEMA
        } = ng.core; @NgModule({ imports: [ BrowserModule ], declarations: [ MyComponent ], bootstrap: [ MyComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) class AppModule {} const { platformBrowserDynamic } = ng.platformBrowserDynamic; platformBrowserDynamic().bootstrapModule(AppModule);
        }
      </script>
    
      <!-- run transpilers -->
      <script src="https://rawgit.com/Microsoft/TypeScript/master/lib/typescriptServices.js"></script>
      <script src="https://rawgit.com/basarat/typescript-script/master/transpiler.js"></script>
      <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
    
      <!-- link for angular -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.2.1/rxjs.umd.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.js"></script>
      <script src="https://unpkg.com/@angular/core@6.0.5/bundles/core.umd.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.26/zone.min.js"></script>
      <script src="https://unpkg.com/@angular/common@6.0.5/bundles/common.umd.js"></script>
      <script src="https://unpkg.com/@angular/compiler@6.0.5/bundles/compiler.umd.js"></script>
      <script src="https://unpkg.com/@angular/platform-browser@6.0.5/bundles/platform-browser.umd.js"></script>
      <script src="https://unpkg.com/@angular/platform-browser-dynamic@6.0.5/bundles/platform-browser-dynamic.umd.js"></script>
    
      <!-- import zinggrid file -->
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
    
    </head>
    
    <body>
    
      <!-- grid component -->
      <my-component></my-component>
    
      <!-- script containing Angular code -->
      <script type="text/typescript">
        window.onload = () => { const { Component } = ng.core; @Component({ selector: 'my-component', template: '
        <zing-grid caption="Hello Doggos" data={{dogs}}></zing-grid>', }) class MyComponent { dogs = `[ { "breed": "Dachshund", "name": "Sousage"}, { "breed": "Corgi", "name": "Plop"}, { "breed": "Pomeranian", "name": "Floof"} ]`; } const { BrowserModule } = ng.platformBrowser; const { NgModule, CUSTOM_ELEMENTS_SCHEMA
        } = ng.core; @NgModule({ imports: [ BrowserModule ], declarations: [ MyComponent ], bootstrap: [ MyComponent ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] }) class AppModule {} const { platformBrowserDynamic } = ng.platformBrowserDynamic; platformBrowserDynamic().bootstrapModule(AppModule);
        }
      </script>
    
      <!-- run transpilers -->
      <script src="https://rawgit.com/Microsoft/TypeScript/master/lib/typescriptServices.js"></script>
      <script src="https://rawgit.com/basarat/typescript-script/master/transpiler.js"></script>
    </body>
    
    </html>
    body {
      background: #FFF;
    }