Getting Started with Ionic and Angular

5 Apr 20254 minutes to read

This guide assists you in creating a simple Angular application using the Ionic Framework and integrating Syncfusion® Angular UI components for enhanced functionality and a polished appearance.

Prerequisites

Before integrating Syncfusion® Angular Components in an Ionic project with Angular, ensure the following prerequisites are installed on your development machine:

Create an Application

To initialize a new project using the command line, execute the following command:

npm i -g @ionic/cli

We are utilizing Node.js version 22 and Ionic version 8.0.0 to support Angular 19.

Once your development setup is complete, create a new project using the Ionic CLI by executing this command:

ionic start syncfusion-angular-ionic blank --type=angular

This command will generate a new Ionic template application in a directory named “syncfusion-angular-ionic” and install the default npm packages necessary for the application.

Refer to this getting started guide for Ionic framework installation details.

Installing Syncfusion® Grid Package

To integrate Syncfusion® Angular packages, run the appropriate command. Below is the command for adding the Syncfusion® Angular Grid package:

npm i @syncfusion/ej2-angular-grids --save

Adding Grid Module

After package installation, the component modules from Syncfusion® are available to configure your application.

Adding Syncfusion® Component

After importing the package, add the following grid component code snippet in the ~/src/app/home/home.page.ts file.

import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { GridModule } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-root',
  template: `
  <h1>
    Syncfusion Angular UI Grid with Electorn!
  </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>
 `,
  imports: [IonApp, GridModule, IonRouterOutlet],
})
export class AppComponent {
  constructor() {}
  public data: Object[] = [
    {
      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
      ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
      ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
      ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
      ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
    },
    {
      OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
      ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
      ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
    }
  ];
}

Adding CSS Reference

Include the following Grid component styles in the ~/src/global.scss file.

@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';

Running the Application

Finally, use the following command to start the application. The Syncfusion® Angular Grid component will be rendered within the Ionic framework.

ionic serve

For your convenience, we have prepared an Angular sample with Ionic framework.