aboutsummaryrefslogtreecommitdiffstats
path: root/demo/angular2.html
diff options
context:
space:
mode:
authorManuel Carrasco Moñino <manolo@apache.org>2016-01-13 15:54:33 +0100
committerManuel Carrasco Moñino <manolo@apache.org>2016-01-13 15:54:33 +0100
commit16c8708ead2d1795e9b53a19d91ab8ac484101cc (patch)
treed8db55569576f42c892fbdf5496ac862a749d0b2 /demo/angular2.html
parentb45e474633eb2c4b168f472e914b5134740d37d6 (diff)
parent985e9bf43a32fa5ae4b51198a70dc31197d3706d (diff)
downloadvaadin-core-16c8708ead2d1795e9b53a19d91ab8ac484101cc.tar.gz
vaadin-core-16c8708ead2d1795e9b53a19d91ab8ac484101cc.zip
Merge pull request #32 from vaadin/integration-examples
Integration examples
Diffstat (limited to 'demo/angular2.html')
-rw-r--r--demo/angular2.html116
1 files changed, 116 insertions, 0 deletions
diff --git a/demo/angular2.html b/demo/angular2.html
new file mode 100644
index 0000000..8732134
--- /dev/null
+++ b/demo/angular2.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<!--
+title: Angular 2
+order: 2
+layout: page
+-->
+
+<html>
+
+<head>
+ <title>vaadin-core-elements Code Examples - Angular 2 Integration</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+ <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+ <link rel="import" href="common.html">
+
+</head>
+
+<body unresolved>
+ <h1>vaadin-core-elements</h1>
+
+ <section>
+ <h3>Angular2 (beta1) Integration</h3>
+ <p>This example demonstrates integrating <code>vaadin-core-elements</code> 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 <code>vaadin-grid</code> we're required to configure the columns
+ trough the JS APIs instead of using the light dom <code>table</code> configuration.</p>
+ <p>Click a row to see an enlarged user image or change the value of the select in
+ <code>vaadin-grid</code> header to filter the results by gender.</p>
+ <p><strong>Note:</strong> IE isn't currently supported.</p>
+
+ <code-example>
+ <iframe src="angular-demo-embed.html" style="width: 100%; height: 600px; border: none; display: none;"></iframe>
+ <style>
+ iframe ~ [demo] {
+ display: none !important;
+ }
+ </style>
+ <div demo>
+ <vaadin-grid [columns]="columns" [items]="items" (selected-items-changed)="onSelect()">
+ </vaadin-grid>
+
+ <img *ngIf="selected" class="user-image" src="{{selected.user.picture.large}}">
+
+ <div style="display: none">
+ <select maxlength=5 (change)="onFilterChange()">
+ <option value=''></option>
+ <option value='male'>Men only</option>
+ <option value='female'>Women only</option>
+ </select>
+ </div>
+ </div>
+ <code>
+ /*
+ // 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 = '<img style="width: 30px" src="' + cell.data + '" />';
+ }
+
+ 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.refreshItems();
+ this.grid.scrollToStart();
+ }
+
+ }
+ // end-code
+ */
+
+ document.querySelector('iframe').style.display = 'inline';
+ document.body.removeAttribute('unresolved');
+ </code>
+ </code-example>
+ </section>
+
+</body>
+</html>