aboutsummaryrefslogtreecommitdiffstats
path: root/demo/angular2.html
diff options
context:
space:
mode:
Diffstat (limited to 'demo/angular2.html')
-rw-r--r--demo/angular2.html115
1 files changed, 0 insertions, 115 deletions
diff --git a/demo/angular2.html b/demo/angular2.html
deleted file mode 100644
index 45db61d..0000000
--- a/demo/angular2.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!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>
-
- <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.async(() => this.grid.refreshItems());
- this.grid.scrollToStart();
- }
-
- }
- // end-code
- */
-
- document.querySelector('iframe').style.display = 'inline';
- document.body.removeAttribute('unresolved');
- </code>
- </code-example>
- </section>
-
-</body>
-</html>