vaadin-core-elements Code Examples - Angular 2 Integration

Angular2 (beta1) Integration

This example demonstrates integrating vaadin-core-elements with an Angular 2 app. Notice that currently we can't declare light DOM content for a Web Component inside the component template so in case of vaadin-grid we're required to configure the columns trough the JS APIs instead of using the light dom table configuration.

Click a row to see an enlarged user image or change the value of the select in vaadin-grid header to filter the results by gender.

Note: IE isn't currently supported.


        /*
        // code
        // Component file: angular-grid.ts
        import {Component} from 'angular2/core';

        @Component({
          selector: 'angular-grid',
          templateUrl: 'angular-grid.html'
        })
        export class AngularGrid {
          selected: Object;
          grid = document.querySelector('angular-grid vaadin-grid');
          columns = [
            {name: "user.picture.thumbnail", width: 100, renderer: this.pictureRenderer},
            {name: "user.gender"},
            {name: "user.name.first"},
            {name: "user.name.last"},
            {name: "user.email"},
          ];

          constructor() {
            // Once grid is ready, add a new header row with the gender select in it
            this.grid.then(() =>
              this.grid.header.addRow(1, ['', document.querySelector('angular-grid select')])
            );
          }

          pictureRenderer(cell) {
            cell.element.innerHTML = '';
          }

          items(params, callback) {
            var gender = document.querySelector('angular-grid select');
            var url = 'https://randomuser.me/api?nat=us&gender='
              + gender.value + '&results=' + params.count;
            getJSON(url, data =>
              callback(data ? data.results : [], gender.value ? 50 : 100)
          }

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

          onFilterChange() {
            this.grid.async(() => this.grid.refreshItems());
            this.grid.scrollToStart();
          }

        }
        // end-code
        */

        document.querySelector('iframe').style.display = 'inline';
        document.body.removeAttribute('unresolved');