From 119fab133fac6ea0fb4ca11fc16265aa66d4caed Mon Sep 17 00:00:00 2001
From: Victor Shchelkunov <viterobk@users.noreply.github.com>
Date: Mon, 6 Feb 2017 18:36:17 +0300
Subject: [PATCH] Add the "Add DevExtreme to Ionic 2 Application" guide (#372)

---
 README.md            |  2 +
 docs/using-ionic2.md | 91 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 docs/using-ionic2.md

diff --git a/README.md b/README.md
index 3c2a82ab8..14623d4aa 100644
--- a/README.md
+++ b/README.md
@@ -101,6 +101,7 @@ The further configuration steps depend on which build tool, bundler or module lo
 * [Configuring Angular CLI](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-angular-cli.md#configuration)
 * [Configuring Webpack](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-webpack.md#configuration)
 * [Configuring Rollup](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-rollup.md#configuration)
+* [Configuring Ionic 2](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-ionic2.md#configuration)
 
 
 ### <a name="create-application"></a>Create a new Angular 2 Application ###
@@ -111,6 +112,7 @@ Depending on your requirements you can choose one of the following ways to start
 * [Start with Angular CLI](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-angular-cli.md)
 * [Start with Webpack](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-webpack.md)
 * [Start with Rollup](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-rollup.md)
+* [Start with Ionic 2](https://github.com/DevExpress/devextreme-angular/blob/master/docs/using-ionic2.md)
 
 ### <a name="running-examples"></a>Running the Local Examples ###
 
diff --git a/docs/using-ionic2.md b/docs/using-ionic2.md
new file mode 100644
index 000000000..1539a928c
--- /dev/null
+++ b/docs/using-ionic2.md
@@ -0,0 +1,91 @@
+# Using the DevExtreme Angular 2 Integration with Ionic 2
+
+## Create an Application
+
+Create an Ionic 2 application as described in the [Ionic 2 Tutorial](http://ionicframework.com/docs/v2/getting-started/tutorial/).
+
+## Install DevExtreme Angular 2 Integration
+
+Once the application is created, install DevExtreme Angular 2 integration npm package. Run the following command in the command prompt.
+
+```
+npm install --save devextreme devextreme-angular
+```
+
+## <a name="configuration"></a>Configure Ionic 2 for DevExtreme
+
+To use DevExtreme within the Ionic 2 application, import the required separate modules or entire DevExtreme to this application within the "src\app\app.module.ts" file.
+
+```
+//Imports a separate module
+import { DxButtonModule } from 'devextreme-angular/ui/button'; 
+
+//Imports the entire DevExtreme
+import { DevExtremeModule } from 'devextreme-angular'; 
+```
+
+Add the imported modules to application imports: 
+
+```
+@NgModule({ 
+    ... 
+    imports: [ 
+        ... 
+        DevExtremeModule, 
+        ... 
+    ] 
+})
+```
+
+## Copy DevExtreme Stylesheets
+
+DevExtreme style sheets are stored in the "node-modules\devextreme\dist\css" folder. You should copy them to the "www\assets\css" folder. You can do it manually, or use [ionic build tools](https://ionicframework.com/docs/v2/resources/app-scripts/) to copy style sheets during the build process. In the second case, copy the "copy.config.js" file from the [Ionic repository](https://github.com/driftyco/ionic-app-scripts/blob/master/config/copy.config.js) to the application root folder.
+
+Add the following item to the "copy" configuration.
+
+```
+module.exports = {
+    . . .
+    copyStyleSheets: {
+        src: ['{{ROOT}}/node_modules/devextreme/dist/css/**/*'],
+        dest: '{{WWW}}/assets/css'
+    }
+}
+```
+
+Reference the created config within the package.json file by adding the "config" section.
+
+```
+"config" : {
+    "ionic_copy": "./copy.config.js"
+},
+```
+
+Add links to the required stylesheets to the head section of the "src\index.html" file.
+
+```
+<link href="assets/css/dx.common.css" rel="stylesheet">
+<link href="assets/css/dx.light.css" rel="stylesheet">
+```
+
+## Add a DevExtreme Component
+
+After you have performed all steps described above, you can use DevExtreme controls on application views. To try how it works, add a button widget to the "src\pages\hello-ionic\hello-ionic.html" file.
+
+```
+. . .
+<ion-content padding>
+    <h3>Welcome to your first Ionic app!</h3>
+    <dx-button text="Hello world"></dx-button>
+. . .
+```
+
+For more information on working with DevExtreme controls in Angular 2 approach, refer to the [DevExtreme-Angular library description](https://github.com/DevExpress/devextreme-angular).
+
+## Run the Application
+
+Run the app using the following command
+
+```
+ionic serve
+```
\ No newline at end of file