Creating and Opening PDF on Ionic 1 on iOS

Recently I ran into an issue using the PdfMake on Ionic 1 on iOS. It works fine on the browser with a simple download or open command but not on the actual device.

Install the cordova libraries:

cordova.plugins.fileOpener2
cordova-plugin-file

Download the pdfmake javascript files and include them in your index.html

<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>

The code:

  var self = this ; // defined on top of the file

  var docDefinition = { content: 'This is an sample PDF printed with pdfMake' };

            self.pdfObj = pdfMake.createPdf(docDefinition);

            if (window.cordova) {
                self.pdfObj.getBuffer(function (buffer) {
                    var blob = new Blob([buffer], { type: 'application/pdf' });
                    // Save the PDF to the data Directory of our App
                    $cordovaFile.writeFile(cordova.file.dataDirectory, 'myletter.pdf', blob, { replace: true }).then(function () {
                        // Open the PDf with the correct OS tools
                        cordova.plugins.fileOpener2.open(cordova.file.dataDirectory + 'myletter.pdf', 'application/pdf');
                    })
                });
            }

Setup Config.xml

In your config.xml make sure you have the file settings

<preference name="AndroidPersistentFileLocation" value="Compatibility" />
<preference name="iosPersistentFileLocation" value="Library" />

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.plugins.fileOpener2.open(
        cordova.file.applicationDirectory + 'www/img/sample.pdf',
        'application/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 = window.open('','childWindow','location=yes, menubar=yes, toolbar=yes');
    childWindow.document.open();
    childWindow.document.write('<html><head></head><body>');
    childWindow.document.write(document.getElementById('printTextArea').value.replace(/\n/gi,'<br>'));
    childWindow.document.write('</body></html>');
    childWindow.print();
    childWindow.document.close();
    childWindow.close();
}

Angular ng-show in ng-repeat not working in Ionic

The official Angular Docs Page for ng-show does not explain how to use this within a repeater.

The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

The common mistake when using ng-show in repeater (ng-repeat) is the usage of angular brackets {{}}

  1. This example won’t work if the div is in a repeater:

<div ng-show="{{value == othervalue}}">

Use This Instead:

<div ng-show="value == othervalue">

Usually the app won’t complain and there won’t be any errors in the console, which makes debugging this edge case so difficult.

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.

Methods

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.
Properties

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: https://docs.angularjs.org/api/ng/service/$q

How to Localize Your Ionic Project

How to localize, translate and support multiple languages in your Ionic / AngularJS project:

1. Install Angular Translate:

npm install angular-translate
npm install angular-translate-loader-static-files

2. In your index.html make sure you include the js files:

<!-- translations -->
<script src="js/angular-translate.js"></script>
<script src="js/angular-translate-static-files.js"></script>

If you cannot find these js files in your project folder then you can find them on the project github pages.

3. In your app.js add the translation loading

angular.module('starter', ['ionic', 'starter.controllers', 'pascalprecht.translate'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
      return StatusBar.hide();
    }
  });
})

.config(['$translateProvider', function ($translateProvider) {
  $translateProvider.useSanitizeValueStrategy('sanitize');

  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/locale-',
      suffix: '.json'
  });

  $translateProvider.preferredLanguage('en');
}])

4. Create a locale json file

Create a file named locale-en.json and a locale folder
the file should be in your www/locale/locale-en.json
Do not include any //comments in the JSON file

{
  "HelloWorld": "Hello World!",
  "Name": "My Name"
}

5. Add localization in your html file

<label>{{ 'HelloWorld' | translate }}</label>

6. Translating within your javascript

Make sure you import $translate within your controller before using it.

 $translate('HelloWorld').then( function (translation){
    console.log(translation);
  });

Or if you need to translate multiple terms:

 $translate(['HelloWorld', 'Goodbye']).then( function (translations){
    console.log(translations.HelloWorld);
    console.log(translations.Goodbye);
  });

For more information visit https://angular-translate.github.io/docs/#/guide.

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}">

</ion-tabs>

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

<ion-view hide-tabs> 

</ion-view>

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.