SyncfusionExamples · Balaji-Elumalai · Jun 30, 2023 · Jun 30, 2023
diff --git 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/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,15 +38,15 @@ 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';
 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: `<ejs-grid [dataSource]='data'>
-  <e-columns>
-    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
-    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
-    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
-    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
-  </e-columns>
-</ejs-grid>`
+  template: `
+  <h1>
+    Syncfusion Angular UI Grid!
+  </h1>
+
+  <ejs-grid [dataSource]='data'>
+    <e-columns>
+      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
+      <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
+      <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
+      <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
+    </e-columns>
+  </ejs-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 
-```
+```
diff --git a/capacitor.config.ts 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
@@ -1,5 +1,7 @@
 {
-  "name": "ej2-ionic",
-  "integrations": {},
+  "name": "syncfusion-angular-ionic",
+  "integrations": {
+    "capacitor": {}
+  },
   "type": "angular"
 }
diff --git 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
@@ -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
@@ -0,0 +1,20 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Blank
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">Blank</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <div id="container">
+    <strong>Ready to create an app?</strong>
+    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+  </div>
+</ion-content>
diff --git 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;
-}

diff --git 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: `<ejs-grid [dataSource]='data'>
-  <e-columns>
-    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
-    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
-    <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
-    <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
-  </e-columns>
-</ejs-grid>`
+  template: `
+  <h1>
+    Syncfusion Angular UI Grid!
+  </h1>
+
+  <ejs-grid [dataSource]='data'>
+    <e-columns>
+      <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
+      <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
+      <e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
+      <e-column field='OrderDate' headerText='Order Date' textAlign='Right' format='yMd' width=120></e-column>
+    </e-columns>
+  </ejs-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
     }
   ];
-}
+}