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.
Unfortunately, activation email could not send to your email. Please try again.

How to use Syncfusion Essential JS Controls with Ionic framework?

Introduction:

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 http://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.

http://ionicframework.com/getting-started/

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.

               

Step3:

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.

 

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.

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

D:\VIGNESH KUMAR DR\JS\samples\mobile\desktop\themes\sampleimages\emulators\android_phone.png

Note:

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

Article ID: Published Date: Last Revised Date: Platform: Control:
7039 08/02/2016 08/02/2016 JavaScript General
Did you find this information helpful?
Comments
PLIACHAS PASCHALIS Jun 04, 2017
is there any grid sample for ionic 2. Thanks
Reply
Farveen Sulthana Thameeztheen Basha [Syncfusion] Jun 13, 2017
Hi

Refer to the online demo Link for ionic 2 Grid example

http://ionicjq.syncfusion.com/#/index?control=grid&defaultfunctionalities

Regards,

Farveen sulthana T

Reply
Add Comment
You must log in to leave a comment

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.