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.