From e6507f1dfb2411d5a1f0ce8d3742e86edd3c77de Mon Sep 17 00:00:00 2001 From: Balaji-Elumalai Date: Fri, 30 Jun 2023 15:52:50 +0530 Subject: [PATCH 1/2] Angular with ionic sample updated. --- .browserslistrc | 10 +++--- capacitor.config.ts | 12 +++++++ ionic.config.json | 6 ++-- package.json | 65 +++++++++++++++++++++---------------- src/app/home/home.module.ts | 4 +-- src/app/home/home.page.html | 20 ++++++++++++ src/app/home/home.page.scss | 27 --------------- src/app/home/home.page.ts | 27 ++++++++------- src/global.scss | 34 +++++++++---------- src/polyfills.ts | 2 ++ tsconfig.json | 2 +- 11 files changed, 116 insertions(+), 93 deletions(-) create mode 100644 capacitor.config.ts diff --git a/.browserslistrc b/.browserslistrc index 1e79afb..b9ebd7e 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -8,9 +8,9 @@ # You can see what browsers were selected by your queries by running: # npx browserslist -Chrome >=60 -ChromeAndroid >=60 -Firefox >=63 +Chrome >=79 +ChromeAndroid >=79 +Firefox >=70 Edge >=79 -Safari >=13 -iOS >=13 +Safari >=14 +iOS >=14 diff --git a/capacitor.config.ts b/capacitor.config.ts new file mode 100644 index 0000000..f7f48d1 --- /dev/null +++ b/capacitor.config.ts @@ -0,0 +1,12 @@ +import { CapacitorConfig } from '@capacitor/cli'; + +const config: CapacitorConfig = { + appId: 'io.ionic.starter', + appName: 'syncfusion-angular-ionic', + webDir: 'www', + server: { + androidScheme: 'https' + } +}; + +export default config; diff --git a/ionic.config.json b/ionic.config.json index 2546641..0dd3730 100644 --- a/ionic.config.json +++ b/ionic.config.json @@ -1,5 +1,7 @@ { - "name": "ej2-ionic", - "integrations": {}, + "name": "syncfusion-angular-ionic", + "integrations": { + "capacitor": {} + }, "type": "angular" } diff --git a/package.json b/package.json index 1075d54..9b8ad58 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "ej2-ionic", + "name": "syncfusion-angular-ionic", "version": "0.0.1", "author": "Ionic Framework", "homepage": "https://ionicframework.com/", @@ -13,48 +13,57 @@ }, "private": true, "dependencies": { - "@angular/common": "^15.0.0", - "@angular/core": "^15.0.0", - "@angular/forms": "^15.0.0", - "@angular/platform-browser": "^15.0.0", - "@angular/platform-browser-dynamic": "^15.0.0", - "@angular/router": "^15.0.0", - "@ionic/angular": "^6.1.9", - "@syncfusion/ej2-angular-grids": "*", - "ionicons": "^6.0.3", - "rxjs": "~7.5.0", + "@angular/animations": "^16.0.0", + "@angular/common": "^16.0.0", + "@angular/compiler": "^16.0.0", + "@angular/core": "^16.0.0", + "@angular/forms": "^16.0.0", + "@angular/platform-browser": "^16.0.0", + "@angular/platform-browser-dynamic": "^16.0.0", + "@angular/router": "^16.0.0", + "@capacitor/app": "5.0.5", + "@capacitor/core": "5.1.0", + "@capacitor/haptics": "5.0.5", + "@capacitor/keyboard": "5.0.5", + "@capacitor/status-bar": "5.0.5", + "@ionic/angular": "^7.0.0", + "@syncfusion/ej2-angular-grids": "^22.1.36", + "ionicons": "^7.0.0", + "rxjs": "~7.8.0", "tslib": "^2.3.0", - "zone.js": "~0.11.4" + "zone.js": "~0.13.0" }, "devDependencies": { - "@angular-devkit/build-angular": "^15.0.0", - "@angular-eslint/builder": "^14.0.0", - "@angular-eslint/eslint-plugin": "^14.0.0", - "@angular-eslint/eslint-plugin-template": "^14.0.0", - "@angular-eslint/template-parser": "^14.0.0", - "@angular/cli": "^15.0.0", - "@angular/compiler": "^15.0.0", - "@angular/compiler-cli": "^15.0.0", - "@angular/language-service": "^15.0.0", - "@ionic/angular-toolkit": "^6.0.0", - "@types/jasmine": "~4.0.0", + "@angular-devkit/build-angular": "^16.0.0", + "@angular-eslint/builder": "^16.0.0", + "@angular-eslint/eslint-plugin": "^16.0.0", + "@angular-eslint/eslint-plugin-template": "^16.0.0", + "@angular-eslint/schematics": "^16.0.0", + "@angular-eslint/template-parser": "^16.0.0", + "@angular/cli": "^16.0.0", + "@angular/compiler": "^16.0.0", + "@angular/compiler-cli": "^16.0.0", + "@angular/language-service": "^16.0.0", + "@capacitor/cli": "5.1.0", + "@ionic/angular-toolkit": "^9.0.0", + "@types/jasmine": "~4.3.0", "@types/node": "^12.11.1", "@typescript-eslint/eslint-plugin": "5.3.0", "@typescript-eslint/parser": "5.3.0", - "eslint": "^7.6.0", + "eslint": "^7.26.0", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsdoc": "30.7.6", "eslint-plugin-prefer-arrow": "1.2.2", - "jasmine-core": "~4.3.0", + "jasmine-core": "~4.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.4.0", - "karma-chrome-launcher": "~3.1.0", + "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", - "ts-node": "~8.3.0", - "typescript": "~4.8.4" + "ts-node": "^8.3.0", + "typescript": "~5.0.2" }, "description": "An Ionic project" } diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index f2b516d..293db79 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { HomePage } from './home.page'; -import { GridAllModule } from '@syncfusion/ej2-angular-grids'; +import { GridModule } from '@syncfusion/ej2-angular-grids'; import { HomePageRoutingModule } from './home-routing.module'; @@ -14,7 +14,7 @@ import { HomePageRoutingModule } from './home-routing.module'; FormsModule, IonicModule, HomePageRoutingModule, - GridAllModule + GridModule ], declarations: [HomePage] }) diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index e69de29..911cab7 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -0,0 +1,20 @@ + + + + Blank + + + + + + + + Blank + + + +
+ Ready to create an app? +

Start with Ionic UI Components

+
+ diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index 8993e7c..e69de29 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -1,27 +0,0 @@ -#container { - text-align: center; - - position: absolute; - left: 0; - right: 0; - top: 50%; - transform: translateY(-50%); -} - -#container strong { - font-size: 20px; - line-height: 26px; -} - -#container p { - font-size: 16px; - line-height: 22px; - - color: #8c8c8c; - - margin: 0; -} - -#container a { - text-decoration: none; -} \ No newline at end of file diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index e602082..2ef890e 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -2,18 +2,23 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-home', - template: ` - - - - - - -` + template: ` +

+ Syncfusion Angular UI Grid! +

+ + + + + + + + + + `, + styleUrls: ['home.page.scss'], }) export class HomePage { - - constructor() {} public data: Object[] = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), @@ -31,4 +36,4 @@ export class HomePage { ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0 } ]; -} +} \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 49e358c..41b3f6e 100644 --- a/src/global.scss +++ b/src/global.scss @@ -10,27 +10,27 @@ */ /* Core CSS required for Ionic components to work properly */ -// @import "~@ionic/angular/css/core.css"; +// @import "@ionic/angular/css/core.css"; /* Basic CSS for apps built with Ionic */ -// @import "~@ionic/angular/css/normalize.css"; -// @import "~@ionic/angular/css/structure.css"; -// @import "~@ionic/angular/css/typography.css"; -// @import '~@ionic/angular/css/display.css'; +@import "@ionic/angular/css/normalize.css"; +@import "@ionic/angular/css/structure.css"; +@import "@ionic/angular/css/typography.css"; +@import '@ionic/angular/css/display.css'; /* Optional CSS utils that can be commented out */ -// @import "~@ionic/angular/css/padding.css"; -// @import "~@ionic/angular/css/float-elements.css"; -// @import "~@ionic/angular/css/text-alignment.css"; -// @import "~@ionic/angular/css/text-transformation.css"; -// @import "~@ionic/angular/css/flex-utils.css"; +@import "@ionic/angular/css/padding.css"; +@import "@ionic/angular/css/float-elements.css"; +@import "@ionic/angular/css/text-alignment.css"; +@import "@ionic/angular/css/text-transformation.css"; +@import "@ionic/angular/css/flex-utils.css"; -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; \ No newline at end of file +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; diff --git a/src/polyfills.ts b/src/polyfills.ts index 429bb9e..394705a 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -41,6 +41,8 @@ * (window as any).__Zone_enable_cross_context_check = true; * */ + +import './zone-flags'; /*************************************************************************************************** * Zone JS is required by default for Angular itself. diff --git a/tsconfig.json b/tsconfig.json index 1205795..e426762 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,7 +16,7 @@ "experimentalDecorators": true, "moduleResolution": "node", "importHelpers": true, - "target": "es2015", + "target": "es2022", "module": "es2020", "lib": [ "es2018", From 943e433ece60b20fd72a4f1082bba1819557e498 Mon Sep 17 00:00:00 2001 From: Balaji-Elumalai Date: Fri, 30 Jun 2023 16:07:25 +0530 Subject: [PATCH 2/2] Angular with ionic sample updated. --- README.md | 81 ++++++++++++++++++++++++++++++------------------------- 1 file changed, 45 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index 9a10cd1..0ae4f39 100644 --- a/README.md +++ b/README.md @@ -7,30 +7,28 @@ This document helps you to create a simple Angular application with the `Ionic F * [System requirements for Syncfusion Angular UI components](https://ej2.syncfusion.com/angular/documentation/system-requirement) * ionic CLI - `^6.x.x` or later -N> If the `ionic CLI` is not installed, refer to the [`Getting Started with ionic`](https://ionicframework.com/getting-started/#cli) document to install it. - ## Create an Application -Create a new project with the following command using the command prompt. +To create a new project using the command prompt, use the following command: ```bash -npm install -g ionic +npm i -g @ionic/cli ``` -Once your development environment is set up, you can start by creating a new project using the Ionic CLI. To do this, run the following command in your command prompt, +>Here, we are using Node.js version 16 and Ionic version 7.0.0 to support Angular 16. + +Once your development environment is set up, users can start by creating a new project using the Ionic CLI. To do this, run the following command in your command prompt, ```bash -ionic start ej2-ionic blank --type=angular +ionic start syncfusion-angular-ionic blank --type=angular ``` -This command will create a new Ionic template application in a folder called "ej2-ionic" and will also install the default npm packages needed for the application. +This command will create a new Ionic template application in a folder called "syncfusion-angular-ionic" and will also install the default npm packages needed for the application. -N> Refer to this [getting started](https://ionicframework.com/getting-started/#cli) document to install ionic framework. +>Refer to this [getting started](https://ionicframework.com/getting-started/#cli) document to install ionic framework. ## Installing Syncfusion Grid package -Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular syncfusion package from [npm]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ). - -Add the `@syncfusion/ej2-angular-grids` package to the application. +Add the Syncfusion angular packages to the application which needs to be run. For example, we have add the Syncfusion Angular Grid package to the application. ```bash npm i @syncfusion/ej2-angular-grids --save @@ -40,7 +38,7 @@ npm i @syncfusion/ej2-angular-grids --save After installing the package, the component modules are available to configure your application from Syncfusion installed package. -Refer to the following code snippet to import the Grid module in `app/src/home/home.module.ts` from the `@syncfusion/ej2-angular-grids`. +Refer to the following code snippet to import the Grid module in `~/src/app/home/home.module.ts` from the `@syncfusion/ej2-angular-grids`. ```typescript import { NgModule } from '@angular/core'; @@ -48,7 +46,7 @@ import { CommonModule } from '@angular/common'; import { IonicModule } from '@ionic/angular'; import { FormsModule } from '@angular/forms'; import { HomePage } from './home.page'; -import { GridAllModule } from '@syncfusion/ej2-angular-grids'; +import { GridModule } from '@syncfusion/ej2-angular-grids'; import { HomePageRoutingModule } from './home-routing.module'; @@ -59,34 +57,40 @@ import { HomePageRoutingModule } from './home-routing.module'; FormsModule, IonicModule, HomePageRoutingModule, - GridAllModule + GridModule ], declarations: [HomePage] }) export class HomePageModule {} + ``` ## Adding Syncfusion component -After importing the package, you can start using the Syncfusion UI components. In this example, we're adding a button component to the `src/home/home.page.ts` file. +After importing the package, add the following grid component code snippet in the `~/src/app/home/home.page.ts` file. ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-home', - template: ` - - - - - - -` + template: ` +

+ Syncfusion Angular UI Grid! +

+ + + + + + + + + + `, + styleUrls: ['home.page.scss'], }) export class HomePage { - - constructor() {} public data: Object[] = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), @@ -105,28 +109,33 @@ export class HomePage { } ]; } + ``` ## Adding CSS Reference -Use the styles for the Grid component, you can import the required dependencies as shown in the following snippet in the `~src/global.scss`, +Add the following Grid component styles as specified in the `~/src/global.scss` file. + +{% tabs %} +{% highlight css tabtitle="~/src/styles.css" %} -```css -@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; @import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; -@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; @import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css'; -``` + +{% endhighlight %} +{% endtabs %} ## Running the Application -Finally, run the following command line to start the application. The Syncfusion Angular button component will be rendered in the ionic framework. +Finally, run the following command to start the application. The Syncfusion Angular Grid component will be rendered in the ionic framework. ```bash ionic serve -``` \ No newline at end of file +```