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');