How To Embed and Open PDF files in Ionic App on iOS

This is a solution for storing and opening pdf files inside your app for offline use.
        cordova.file.applicationDirectory + 'www/img/sample.pdf',
          error: function (e) {
            console.log('Error status:'+e.status+'- Error message:'+ e.message);
          success: function () {
            console.log('file opened successfully');

Opening the pdf should be fairly simple using the cordova.plugins.fileOpener2 plugin, but I ran into a strange issue because my app name in the config.xml contained a space such as: <name>My App</name>. This caused the iOS to misread the file path. Removing this space in the app name fixed the file path on iOS.

I put the sample pdf doc in the ionic project under my images folder www/img/sample.pdf.

Good luck!

How To Print Textarea With Javascript in Ionic

How To Print Textarea With Javascript?

$scope.printText = function(){

    // replace the printTextArea with your id
    childWindow ='','childWindow','location=yes, menubar=yes, toolbar=yes');;

How To Use Ionic & Angular q Promises?

The Deferred API

A new instance of deferred is constructed by calling $q.defer().

The purpose of the deferred object is to expose the associated Promise instance as well as APIs that can be used for signaling the successful or unsuccessful completion, as well as the status of the task.


resolve(value) – resolves the derived promise with the value. If the value is a rejection constructed via $q.reject, the promise will be rejected instead.

reject(reason) – rejects the derived promise with the reason. This is equivalent to resolving it with a rejection constructed via $q.reject.

notify(value) – provides updates on the status of the promise’s execution. This may be called multiple times before the promise is either resolved or rejected.

promise – {Promise} – promise object associated with this deferred.

// for the purpose of this example let's assume that variables `$q` and `okToGreet`
// are available in the current lexical scope (they could have been injected or passed in).

function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    deferred.notify('About to greet ' + name + '.');

    if (okToGreet(name)) {
      deferred.resolve('Hello, ' + name + '!');
    } else {
      deferred.reject('Greeting ' + name + ' is not allowed.');
  }, 1000);

  return deferred.promise;

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);

This code example was taken from Angular Documentation page:$q

How to use ng-disabled with multiple expression

You may have ran into this issue when trying to bind a submit button with multiple disable conditions. The easiest way to do this is to embed the variable checking in the html as follows:

Both variable must be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 && !data.var2) ? false : true">

Either variable can be false for the button to be disabled:

<button class="button" ng-disabled="(!data.var1 || !data.var2) ? false : true">

How To Open Chrome Device Debugger?

Last night I was trying to open the chrome debugger for an ionic app running on my ios device but could not remember the URL. This was a very simple thing but was nearly impossible to discover on the internet for some reason…

To do this: Open Chrome Browser and type chrome://inspect/ in the url field.

I don’t know why Chrome and Google make this so hard to discover.

How to Deploy Your Ionic Node.js app to Heroku

In this tutorial I will explain how to deploy one of my Ionic starters to Heroku with Dropbox. Both dropbox and heroku have a free tier that you can use. If you get serious about your app you can upgrade to heroku professional account which is similar to Amazon’s service but much easier to use.

Prerequisite: Sign up for and download their desktop client. Use one of my ionic starters with a node.js backend or use your own node project.

1. Create an account on

Screen Shot 2016-04-25 at 11.42.05 AM

Continue reading

How to Hide Specific Ionic Tabs in Angular

How to Hide Specific Ionic Tabs in Angular? It turns out ionic does not support this functionality by default although I think it should, but luckily it’s not that complicated.

Here are the 3 simple steps:

1. In your tabs.html add this ng-class

<ion-tabs ng-class="{'tabs-item-hide': hideTabs}">


2. Add ‘hide-tabs’ in your views where you want to hide the tabs

<ion-view hide-tabs> 


3. In your app.js add the directive to hide tabs

.directive('hideTabs', function($rootScope) {
    return {
        restrict: 'A',
        link: function($scope, $el) {
            $rootScope.hideTabs = true;
            $scope.$on('$destroy', function() {
                $rootScope.hideTabs = false;

The hide-tabs directive will hide the tab on whichever ion-view you set it to.

How to Format Post Dates to show Time since Post

Ever wonder how to format your post times to show up like Twitter or Facebook time since post in minutes, hours, etc? Here is an example of a facebook post 5 hrs ago:

hours ago

I recently had to do this for one of my Ionic mobile apps. Here is the function in JavaScript:

function formatTimeSincePost(time) { // SHOW TIME SINCE POST

    var now = new Date();
    var postTime = new Date(Date.parse(time));
    postTime = now.getTime() – postTime.getTime();

    var timeAgo = Math.ceil(postTime/1000/60);
    var displayTime = "" ;

    if ( timeAgo > 1440 ){ // SHOW DAYS
        displayTime = "" + Math.ceil(timeAgo/60/24) + " days" ;
    else if (timeAgo > 59){ // SHOW HOURS
        displayTime = "" + Math.ceil(timeAgo/60) + " hrs" ;
    else { // SHOW MINUTES
        displayTime = timeAgo + " min" ;

  return displayTime;

You can also add months and years easily if you wish. There you go, happy coding.

Ionic App Starter Templates on and Ionic Marketplace

I recently published some of my Ionic Starter Templates that should speed up your new hybrid app development on and Ionic Market. All starters have been tested on both iOS and Android.


Screen Shot 2016-01-10 at 3.27.51 PMIonic Geolocation – A quick way to start a new geolocation enabled app

Ionic Phonebook – A very easy way to start your phonebook & contacts app

Ionic OAuth – A full app with a node.js backend to support user creation, session, login & social login

Ionic Login Session – A full stack app with node.js backend without the social login support

Also please leave a rating if you get one! many thnx =)