vaadin-grid Code Examples - Angular 2 Integration

Angular2 (alpha44) Integration (Light DOM data source)

Static data can be easily bound to vaadin-grid light DOM cells with Angular data binding.


        /*
        // code
        // Component file: angular-grid-dom.ts
        import {bootstrap, Component, View, NgFor} from 'angular2/angular2';

        @Component({
          selector: 'angular-grid-dom'
        })
        @View({
          template: `
          <vaadin-grid selection-mode='disabled'>
            <table>
              <colgroup>
                <col width="80">
                <col>
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>Name</th>
                  <th>First name</th>
                  <th>Last name</th>
                </tr>
              </thead>
              <tbody>
                <tr *ng-for="var user of users">
                  <td><img src="{{user.thumbnail}}" style="width: 30px"></td>
                  <td>{{user.firstname}}</td>
                  <td>{{user.lastname}}</td>
                </tr>
              </tbody>
            </table>
          </vaadin-grid>
          `,
          directives: [NgFor]
        })
        export class AngularGridDom {
          users = [
              {"firstname":"raul","lastname":"diez","thumbnail":randomUserUrl + "portraits/thumb/men/39.jpg"},
              {"firstname":"sonia","lastname":"benitez","thumbnail":randomUserUrl + "portraits/thumb/women/91.jpg"},
              {"firstname":"luis","lastname":"torres","thumbnail":randomUserUrl + "portraits/thumb/men/11.jpg"},
          ]
        }

        bootstrap(AngularGridDom);
        // end-code
        */

Angular2 (alpha44) Integration (Function data source)

In case the data is loaded lazily or it changes dynamically a function datasource is a better option. Click a row to see an enlarged user image.


        /*
        // code
        // Component file: angular-grid.ts
        import {Inject, bootstrap, Component, View, NgIf} from 'angular2/angular2';
        import {Http, HTTP_BINDINGS} from 'angular2/http';

        @Component({
          selector: 'angular-grid'
        })
        @View({
          templateUrl: 'angular-grid.html',
          directives: [NgIf]
        })
        export class AngularGrid {
          selected: Object;
          grid = document.querySelector("angular-grid vaadin-grid");
          gender = document.querySelector("angular-grid select");

          constructor(@Inject(Http) http: Http) {
            HTMLImports.whenReady(function() {
              // Set a datasource for the vaadin-grid
              this.grid.items = (params, callback) =>
                http.get(this.getUrl(this.gender.value, Math.max(params.count, 1)))
                  .map(res => res.json().results)
                  .subscribe(results => {callback(results, this.gender.value ? 50 : 100)});

              // Set a renderer for the picture column
              this.grid.columns[0].renderer = cell =>
              cell.element.innerHTML = ""

              // Add a new header row with the gender select in it
              this.grid.header.addRow(1, ["", this.gender]);

              // Add the selected-items-changed event listener manually.
              // (can be removed once https://github.com/angular/angular/issues/4923 in use)
              this.grid.addEventListener("selected-items-changed", this.onSelect.bind(this));
            }.bind(this));

          }

          getUrl(gender: string, results: number) : string {
            return randomUserUrl + '?nat=us&gender=' + gender + '&results=' + results;
          }

          onSelect() {
            this.selected = undefined;
            const selectedIndex = this.grid.selection.selected()[0];
            this.grid.getItem(selectedIndex, (err, data) => this.selected = data);
          }
        }

        bootstrap(AngularGrid, [HTTP_BINDINGS]);
        // end-code
        */

vaadin-grid Angular 2 Integration

Angular2 (alpha44) Integration (Light DOM data source)

Angular2 (alpha44) Integration (Function data source)