We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

How to use Syncfusion Essential JS Controls with Ionic framework?

Platform: jQuery |
Control: General


Ionic is an open source Mobile SDK for developing native and progressive web apps. Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive Web apps. Built with Sass, optimized for AngularJS. Please go through the https://ionicframework.com/ page.

Ionic Getting started:

Please go through the ionic getting started in the below link and follow the necessary steps to configure and run the Ionic samples.


Using Syncfusion Essential JS controls with ionic framework:

Syncfusion framework integrate with ionic framework and use the both framework in a single application. Here implemented the Syncfusion and Ionic button controls in a single page.

Syncfusion and ionic button Sample:

Step 1:

Create the blank Ionic project as mentioned in this link.


Step 2:

Add the Ionic button sample inside the ion-content in the www/index.html file.

<button class="button button-positive">Ionic</button>



Add the Syncfusion JS and CSS file reference as mentioned in the link

Step 4:

Add the Syncfusion button control sample inside the ion-content. Please go through the link for Syncfusion AngularJS sample implementation.

All the Syncfusion widget’s control directives are prefixed with ej- to avoid conflict with other library directives and its properties are defined using e- prefix followed by the property name.

<button id="syncbutton" class="ang-button btn" ej-button e-showroundedcorner="roundedcorner" e-size="size">Syncfusion</button>


Step 5:

Now open the app.js in the location (www/js).

Essential JS directives have been encapsulated into a single module called ejangular so the first step would be to declare dependency for this module within your AngularJS application. Also here we declare the properties values for the button control like roundedcorner etc.

angular.module('starter', ['ejangular', 'ionic'])

    .controller('samplecontroller', function ($scope, $compile, $document) {       

        $scope.roundedcorner = true;

        $scope.size = "large";


Now run the application, Syncfusion and Ionic controls are rendered in a single page.




We have implemented the with Ionic framework and showcase the Syncfusion controls.


You must log in to leave a comment
Jun 04, 2017
is there any grid sample for ionic 2. Thanks Reply
Farveen Sulthana Thameeztheen Basha [Syncfusion]
Jun 13, 2017

Refer to the online demo Link for ionic 2 Grid example



Farveen sulthana T


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile