Skip to main content

Using Plugins Without Ionic Native In Ionic

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post, we will take a look at how you can use plugins without the Ionic Native wrapper. There are a few plugins out there that do not have the Ionic Native wrapper around them, this is when you get stuck, because it can be tricky to figure out how to use those plugins in Ionic.

The Ionic team does a good job in maintaining the Ionic Native code base. But still there are times that the team has not implement a wrapper for a plugin that you want to use, then you can have some trouble figuring out how to use that plugin with Ionic. If you take a look at the plugin docs, the docs invariably will be in plain JavaScript as most plugins are created and maintained keeping Apace Cordova in mind.

For the sake of simplicity, let’s assume that the Vibration plugin does not have an Ionic Native wrapper (it Does but we are assuming it does not).

Let’s create a simple app showing the use of the Vibration Plugin. I have already written a post on how to use the vibration plugin so I will not be going into much details of it in this post.

Step 1)

Let’s start off by creating a new app. We do that using the following command.

 

Step 2)

Now it’s time to add the plugin.We do that as follows.

Step 3)

We will create a button and we will vibrate the device when the button is tapped. So to create the button, open up src\pages\home\home.html and code it as follows.

Here we have a function vibrate() that will be executed every time the button is clicked.

 

Step 4)

Now it’s time to implement the vibration functionality. Open up src\pages\home\home.ts and code it as follows.

As you can see here that we have declared the navigator variable by doing declare var navigator: any;. This allows us to use navigator.vibrate(50) inside our function which will vibrate the device.

A thing to note here is that navigator declaration work for this plugin, there are other plugins in which you will have to declare the window variable. Check out the relevant plugin docs to see what you need to declare.

 

Conclusion

Using plugins with Ionic Native should be your first choice as it will give you code hinting, where are using plugins directly as I have shown here will not give you that. The Ionic Native collection of plugins is an extensive list that are the most used, the post popular and well maintained. If you find a plugin that is not in the Ionic Native collection and would love to see it added, you can pull up an issue it the Ionic Native github repo and let them know.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: