• 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; }