diff options
Diffstat (limited to 'docs/angular2.adoc')
| -rw-r--r-- | docs/angular2.adoc | 103 |
1 files changed, 64 insertions, 39 deletions
diff --git a/docs/angular2.adoc b/docs/angular2.adoc index a1a2364..0387c29 100644 --- a/docs/angular2.adoc +++ b/docs/angular2.adoc @@ -7,26 +7,39 @@ layout: page [[vaadin-core-elements.angular2]] = Angular 2 Integration -While Vaadin Elements are built using Polymer, they also contain directives to enable seamless usage within Angular 2 applications. +While Vaadin Elements are built using Polymer, you need the [literal]#https://github.com/vaadin/angular2-polymer[@vaadin/angular2-polymer]# directive to enable seamless usage within Angular 2 applications. + This page assumes that you already have an Angular 2 application setup ready. + If you need help with the project setup, you should follow the https://angular.io/docs/ts/latest/quickstart.html[Angular 2 Quickstart] guide. == Installation -Although Angular 2 dependecies are typically installed via https://www.npmjs.com/[npm], Vaadin Elements require installation with http://bower.io[Bower]. -To install a Vaadin Core Element, you should run the following command in your project directory (replace the `[element-name]` part with the actual name of the element). - [NOTE] + Angular 2 support was introduced in `1.1.0-alpha1` versions of each element. + For element versions `1.1.0-beta2` or newer, use Angular version `2.0.0-rc.0`. + For element versions `1.1.0-alpha1 to 1.1.0-beta1`, use Angular version `2.0.0-beta.16/17`. -[source,bash] + +Use https://www.npmjs.com/[npm] to install the generic polymer directive that allows the usage of any Polymer element in Angular 2. + +[subs="normal"] ---- -bower install --save vaadin-[element-name]#1.1.0-beta2 +[prompt]#$# [command]#npm# install @vaadin/angular2-polymer ---- -After the Bower installation is completed, you need to add the Web Components polyfill to the `<head>` section of your `index.html` file. +Although Angular 2 dependecies are typically installed via npm, Vaadin Elements require installation with http://bower.io[Bower]. +To install a Vaadin Core Element, first you should set up bower in your project, and then you need to run the following command in your project directory (replace the `[element-name]` part with the actual name of the element). + +[subs="normal"] +---- +[prompt]#$# [command]#bower# init +[prompt]#$# [command]#bower# install --save vaadin-[replaceable]##element-name#1.1.0-beta3## +---- + +After the Bower installation is completed, you need to add the Web Components polyfill to the [elementname]#head# section of your [filename]#index.html# file. + [source,html] ---- <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> @@ -41,12 +54,14 @@ In order to have the newly installed Vaadin element available in your templates, ---- Also the SystemJS configuration needs some modifications in order to load the modules correctly. -Add the following `packages` entry for `bower_components` to your configuration unless it’s already present. +Add the following `packages` entry for `bower_components` to your configuration unless it is already present. [source,javascript] ---- System.config({ - map: 'bower_components': 'bower_components', + map: { + 'bower_components': 'bower_components' + }, packages: { 'bower_components': { defaultExtension: 'js' @@ -56,7 +71,7 @@ System.config({ ---- Before bootstrapping your application, you need to wait for the `WebComponentsReady` event. -This event is fired after the HTML imports are done and the custom elements are upgraded and ready to be used. +The event is fired after the HTML imports are done and the custom elements are upgraded and ready to be used. The following example demonstrates how to wrap your bootstrap code inside the event listener. [source,javascript] @@ -67,38 +82,43 @@ window.addEventListener('WebComponentsReady', function() { ---- [NOTE] -If you see errors about missing behaviors in the console, please visit this https://github.com/vaadin/vaadin-core-elements/issues/46[known issue]. +If you see errors about missing behaviors in the console, please visit the https://github.com/vaadin/vaadin-core-elements/issues/46[Vaadin Core Elements issue #46]. -Now you’re all set to use the element inside your Angular 2 application. +[NOTE] +If compilation fails due to implicitly declared vars in any dependency, set the property [propertyname]#noImplicitAny# to `false` in your [filename]#tsconfig.json# file. + +Now you are all set to use the element inside your Angular 2 application. == Importing -Import the directive as follows. This example imports the [vaadinelement]#vaadin-date-picker# element, but you should replace the path with the element you’re importing. -Also the directive name should be replaced with a camel case representation of the element name. +Import the Polymer directive as follows. [source,javascript] ---- -import { VaadinDatePicker } from '../bower_components/vaadin-date-picker/directives/vaadin-date-picker'; +import { PolymerElement } from '../node_modules/@vaadin/angular2-polymer/polymer-element'; ---- Your Angular 2 component also needs to declare the usage of the directive. This can be done with the `directives` array of the `@Component` decorator. + After the directive is declared, the element is available to be used in the `template` of your component. -[source] +Te following example uses the directive with the [elementname]#vaadin-date-picker# element. Replace the path with the element you are importing. + +[source, javascript] ---- @Component({ selector: 'my-component', template: '<vaadin-date-picker [(value)]="birthDay"></vaadin-date-picker>', - directives: [VaadinDatePicker] + directives: [PolymerElement('vaadin-date-picker')] }) ---- -Notice that for Vaadin Charts, you also need to import and declare the `DataSeries` directive as follows. +Notice that for Vaadin Charts, you also need to add the directive for the [vaadinelement]#data-series# element as follows. -[source] +[source, javascript] ---- -import { VaadinCharts, DataSeries } from '../bower_components/vaadin-charts/directives/vaadin-charts'; +import { PolymerElement } from '../node_modules/vaadin-ng2-polymer/polymer-element'; @Component({ selector: 'my-component', @@ -111,16 +131,16 @@ import { VaadinCharts, DataSeries } from '../bower_components/vaadin-charts/dire <data>1, 1, 2, 3, 5, 8, 13, 21, 34</data> </data-series> </vaadin-area-chart>`, - directives: [VaadinCharts, DataSeries] + directives: [PolymerElement('vaadin-charts'), PolymerElement('data-series')] }) ---- == Usage -For the most part you can use the API provided by the element. -This API is described in the documentation of each individual element. -Most notable changes introduced by the directives are the support for data-binding using the Angular 2 syntax and integration with the https://angular.io/docs/ts/latest/guide/forms.html[Angular forms]. +For the most part, you can use the API provided by the element. +The API is described in the documentation of each individual element. +Most notable changes introduced by the directives are the support for data binding using the Angular 2 syntax and integration with the https://angular.io/docs/ts/latest/guide/forms.html[Angular forms]. -=== Data-Binding +=== Data Binding You can use Angular 2 data-binding syntax with all the properties declared in the API documentation for each element. Some properties also support two-way data-binding. These are marked with [propertyname]#notifies# in the API documentation. @@ -135,11 +155,11 @@ Some properties also support two-way data-binding. These are marked with [proper === Form Controls -When using input-like elements ([elementname]#vaadin-combo-box#, [elementname]#vaadin-date-picker# or [elementname]#vaadin-upload#) inside an Angular form, you should normally use the [propertyname]#ngControl# attribute to track the state and validity. +When using input-like elements ([elementname]#vaadin-combo-box#, [elementname]#vaadin-date-picker#, or [elementname]#vaadin-upload#) inside an Angular form, you should normally use the [propertyname]#ngControl# attribute to track the state and validity. You can use two-way data-binding with [propertyname]#ngModel# as you would with other form fields. -Simple validation like the [propertyname]#required# validator is supported as well as defining custom validators. +Validation is supported with the simple [propertyname]#required# validator as well as with custom validators that you can define. -See the example below on how to use [elementname]#vaadin-combo-box# as a form control with data-bound [propertyname]#items# property. +See the following example on how to use [elementname]#vaadin-combo-box# as a form control with data-bound [propertyname]#items# pro perty. [source] ---- <vaadin-combo-box @@ -155,9 +175,9 @@ See the example below on how to use [elementname]#vaadin-combo-box# as a form co Due to the Shadow DOM encapsulation, applying normal CSS rules for a Vaadin Element is limited to the main element only. Therefore, in order to fully customize the appearance of Vaadin Elements, you need to use https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details[CSS properties] and https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins[CSS mixins]. -Unfortunately these styles cannot be applied on a component level, but instead you need to provide styles in application level and also use the `is="custom-style"` attribute. +Unfortunately, these styles cannot be applied on the component level. Instead you need to provide styles on application level and also use the `is="custom-style"` attribute. -Changing the icon color of [vaadinelement]#vaadin-date-picker# to `red` could be done with the following example. +Changing the icon color of [vaadinelement]#vaadin-date-picker# to `red` can be done as in the following example: [source] ---- <style is="custom-style"> @@ -172,13 +192,14 @@ Changing the icon color of [vaadinelement]#vaadin-date-picker# to `red` could be See the documentation of each element for a list of available properties and mixins. === Grid -The [elementname]#vaadin-grid# element uses a `table` child element to declaratively configure columns, headers and footers. -In case you’ll need to apply modifications to the declaratively configured [elementname]#vaadin-grid# columns, you must wait for the component to be fully initialized first. -To do this, you should use the `grid-ready` event as follows. +The [elementname]#vaadin-grid# element uses a `table` child element to declaratively configure columns, headers, and footers. +In case you need to apply modifications to the declaratively configured [vaadinelement]#vaadin-grid# columns, you must wait for the component to be fully initialized first. +You can wait for it by using the native element as a Promise. +For example, let us assume that you have the following element defined: [source] ---- -<vaadin-grid (grid-ready)="gridReady($event)" [items]="dataItems"> +<vaadin-grid #grid> <table> <colgroup> <col> @@ -186,12 +207,16 @@ To do this, you should use the `grid-ready` event as follows. </table> </vaadin-grid> ---- + +Now, you can wait for the initialization to complete with a promise as is done in the following: + [source, javascript] ---- -gridReady(grid) { - // You can now configure the columns by adding a renderer function for example. - grid.columns[0].renderer = (cell) => { - cell.element.innerHTML = 'row-' + cell.row.index; - } +@ViewChild('grid') grid: any; + +ngAfterViewInit() { + this.grid.nativeElement.then(() => { + // Some code to configure the grid. + }); } ---- |