You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Use the components found in `src\igniteui.angular2.ts` to use [Ignite UI](http://igniteui.com) controls in [Angular 2](https://angular.io/) applications. [Work with the running samples here](http://igniteui.github.io/igniteui-angular2).
7
+
Use the components found in `src\igniteui.angular2.ts` to use [Ignite UI](http://igniteui.com) controls in [Angular](https://angular.io/) applications. [Work with the running samples here](http://igniteui.github.io/igniteui-angular2).
8
8
9
-
#Requirements
9
+
#Requirements
10
10
11
11
-[jQuery](http://www.jquery.com) v1.9.1 and later
12
12
-[jQuery UI](http://www.jqueryui.com) v1.9.0 and later
13
-
-[AngularJS 2](https://angular.io/) v2.0 beta and later
13
+
-[Angular](https://angular.io/) v2.0 beta and later
14
14
-[Ignite UI](http://www.igniteui.com) 15.2 and later
15
15
16
-
#Running the samples
16
+
#Running the samples
17
17
To run the samples, you need [Node.js](http://nodejs.org/) installed on your machine.
18
18
Afterwards, from your terminal run the following commands:
19
19
@@ -22,10 +22,18 @@ Afterwards, from your terminal run the following commands:
22
22
3.`npm install`
23
23
4.`npm start`
24
24
25
-
#Getting Started
25
+
`igniteui-angular2` depends on the `ignite-ui-full` licensed package. Follow [this guide](https://www.igniteui.com/help/using-ignite-ui-npm-packages) on setting up access to the Ignite UI private npm feed and add the dependency to the `package.json`.
26
+
27
+
```
28
+
"dependencies": {
29
+
"@infragistics/ignite-ui-full": "latest"
30
+
}
31
+
```
32
+
33
+
# Getting Started
26
34
27
35
## Initializing controls
28
-
In an Angular 2 application, Ignite UI controls support markup initialization which is done by using custom tags.
36
+
In an Angular application, Ignite UI controls support markup initialization which is done by using custom tags.
29
37
30
38
### Custom tags
31
39
Each control implements a custom tag component where the tag name is formed by splitting each capital letter in the control name with the `-` symbol.
@@ -64,8 +72,7 @@ There are two mandatory attributes that need to be set to an Ignite UI control c
64
72
selector: 'my-app',
65
73
template: `<ig-grid
66
74
[(options)]="gridOptions"
67
-
[(widgetId)]='id'></ig-grid>`,
68
-
directives: [IgGridComponent]
75
+
[(widgetId)]='id'></ig-grid>`
69
76
})
70
77
export class AppComponent {
71
78
private gridOptions: IgGrid;
@@ -104,8 +111,7 @@ when there are overlapping properties. Also changing top-level attribute will ap
104
111
[height]='h'
105
112
[autoGenerateColumns]='true'
106
113
>
107
-
</ig-grid>`,
108
-
directives: [IgGridComponent]
114
+
</ig-grid>`
109
115
})
110
116
export class AppComponent {
111
117
private id: string;
@@ -123,7 +129,51 @@ when there are overlapping properties. Also changing top-level attribute will ap
123
129
}
124
130
}
125
131
126
-
### Aply new set of Control Options
132
+
### Other custom tags
133
+
134
+
There are two custom tags `<column>` and `<features>` that are used in igGrid/igTreeGrid/igHierarchicalGrid to configure the `columns` and `features` options accordingly.
In order to change the more options at once (or recreate the component with another set of options), the new configuration can be applied to the `options` property.
129
179
@@ -133,8 +183,7 @@ In order to change the more options at once (or recreate the component with anot
133
183
selector: 'my-app',
134
184
template: `<ig-grid
135
185
[(options)]="gridOptions"
136
-
[(widgetId)]='id'></ig-grid>`,
137
-
directives: [IgGridComponent]
186
+
[(widgetId)]='id'></ig-grid>`
138
187
})
139
188
export class AppComponent {
140
189
private gridOptions: IgGrid;
@@ -186,8 +235,7 @@ Binding to control events is achieved by assigning attributes where the name of
186
235
template: `<ig-grid
187
236
[(options)]="gridOptions"
188
237
[(widgetId)]='id'
189
-
(dataBind)="dataBindHandler($event)"></ig-grid>`,
190
-
directives: [IgGridComponent]
238
+
(dataBind)="dataBindHandler($event)"></ig-grid>`
191
239
})
192
240
export class AppComponent {
193
241
private gridOptions: IgGrid;
@@ -219,8 +267,7 @@ Binding to igGrid* feature events is done in the control's configuration code.
219
267
selector: 'my-app',
220
268
template: `<ig-grid
221
269
[(options)]="gridOptions"
222
-
[(widgetId)]='id'></ig-grid>`,
223
-
directives: [IgGridComponent]
270
+
[(widgetId)]='id'></ig-grid>`
224
271
})
225
272
export class AppComponent {
226
273
private gridOptions: IgGrid;
@@ -259,25 +306,109 @@ Component methods can be called by accessing the component from the view. For ex
259
306
template: '<ig-grid #grid1
260
307
[(options)]="gridOptions">
261
308
<features>
262
-
<paging [pageSize]="'2'"></paging>
263
-
</features>
264
-
</ig-grid>',
265
-
directives: [IgGridComponent]
309
+
<paging [pageSize]="'2'"></paging>
310
+
</features>
311
+
</ig-grid>'
266
312
})
267
-
export class AppComponent {
268
-
private gridOptions: IgGrid;
269
-
@ViewChild("grid1") myGrid: IgGridComponent;
313
+
export class AppComponent {
314
+
private gridOptions: IgGrid;
315
+
@ViewChild("grid1") myGrid: IgGridComponent;
270
316
private id: string;
271
317
constructor() { ... }
272
318
273
-
ngAfterViewInit() {
274
-
//call grid method
275
-
var cell = this.myGrid.cellById(1, "Name");
319
+
ngAfterViewInit() {
320
+
//call grid method
321
+
var cell = this.myGrid.cellById(1, "Name");
276
322
//call grid paging method
277
323
this.myGrid.featuresList.paging.pageIndex(2);
278
324
}
279
325
}
280
326
327
+
## Using Ignite UI Angular Components inside AOT app
328
+
As a starting point, you can review the [Angular documentation on the subject](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html), which provides a guide how to compile an app with AOT. Follow their instructions to AOT compile the quickstart app.
329
+
330
+
Once you have a running application compiled with AOT, the next step is to add the Ignite UI Components into this app. In this demo IgComboComponent is being added to the app, igCombo is an OSS widget and it is part of the ignite-ui npm package.
331
+
First we need to install the required packages:
332
+
-`npm install ignite-ui`
333
+
-`npm install igniteui-angular2`
334
+
-`npm install jquery-ui-bundle`
335
+
336
+
**Note**: You have to download the full Ignite UI product if you would like to use widgets which are not part of the OSS widgets. This is a [list](https://github.com/IgniteUI/ignite-ui#available-features-in-ignite-ui-open-source-version) of the controls available in the Open-source version
337
+
338
+
Then go to the app module and import the combo - `import 'ignite-ui/js/modules/infragistics.ui.combo.js';`. But before that add all the dependencies for it:
In addition, at the end import the IgniteUIModule:
348
+
349
+
import { IgniteUIModule } from 'igniteui-angular2';
350
+
@NgModule({
351
+
imports: [ BrowserModule, IgniteUIModule ],
352
+
…
353
+
})
354
+
export class AppModule {}
355
+
356
+
In order to take advantage of the [Tree shaking](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#tree-shaking) the Rollup has to be set up.
357
+
Open rollup-config.js, include igniteui-angular2 to `commonjs` plugin and add `namedExport` for jquery:
Additional plugin rollup-plugin-replace should be installed
369
+
`npm install rollup-plugin-replace` in order to fix the offline compilation of Ignite UI util module.
370
+
`this.Class` should be changed to `window.Class`, because the offline compilation is not having the same [context and this is changed to undefined](https://github.com/rollup/rollup/issues/942).
371
+
372
+
replace({
373
+
// this is undefined for the specified context, so replace it with window to access Class
At the end, apply Ignite UI styling. To achieve this, postcss plugin should be installed
394
+
`npm install rollup-plugin-postcss`
395
+
396
+
Open rollup-config.js file and import postcss:
397
+
398
+
import postcss from 'rollup-plugin-postcss'
399
+
…
400
+
postcss({
401
+
extensions: ['.css']
402
+
}),
403
+
404
+
405
+
[Download](https://github.com/IgniteUI/igniteui-angular2/files/975676/quickstart-igniteui-angular2-aot.zip) the modified app which uses the specified product. To run it with AOT:
406
+
1. npm install
407
+
2. npm run build:aot
408
+
3. npm run serve
409
+
410
+
411
+
281
412
## Two-way Data Binding
282
413
The following controls currently support two-way data binding:
283
414
@@ -288,6 +419,18 @@ The following controls currently support two-way data binding:
288
419
5. igEditors
289
420
6. igTree
290
421
422
+
## Use igDataSource inside Angular app
423
+
424
+
Thanks to the @types/ignite-ui, it is possible to create an instace of the all of the Ignite UI data sources.
425
+
426
+
let source = new Infragistics.DataSource(settings);
427
+
428
+
This data source instance is granted with intellisense about igDataSource methods.
429
+
430
+
source.dataBind();
431
+
432
+
Review the following [demo](http://igniteui.github.io/igniteui-angular2/samples/igDataSource/igDataSource.html) for more information.
433
+
291
434
## Running tests
292
435
293
436
The command for running the tests is:
@@ -303,7 +446,7 @@ Since we need the code coverage of the `igniteui.angular2.js` file itself, we us
[Ignite UI](http://igniteui.com/) is an advanced HTML5+ toolset that helps you create stunning, modern Web apps. Building on jQuery and jQuery UI, it primarily consists of feature rich, high-performing UI controls/widgets such as all kinds of charts, data visualization maps, (hierarchical, editable) data grids, pivot grids, enhanced editors (combo box, masked editors, HTML editor, date picker, to name a few), flexible data source connectors, and a whole lot more. Too many to list here - check out [the site](http://igniteui.com/) for more info and to [download](https://igniteui.com/download) a trial.
0 commit comments