aboutsummaryrefslogtreecommitdiffstats
path: root/demo/angular2.html
blob: 45db61d8ebbe711c18c07ad277b327c020692c7d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>