While reading through the Ionic forum I noticed a trend of people asking about changing and locking Ionic application screen orientation. A lot of those questions never found a correct answer, some of them were even unanswered.
 
I’m writing this article to show you how easy is to do just that using a Cordova Screen Orientation Plugin. This article will come with a working example, but if you would like to see a more complex application/demo, leave me a comment below, I’m more than willing to help.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Table of Contents

 
Click here if you want to see other tutorials, or articles about the Ionic framework (themes, templates, plugins, tutorials)
 

Preparation

 
Before we can start make sure you have everything configured correctly.
 
You will need to have these:
 
  • Android Environment (or iOS if your working on a MacOS)
  • nodeJS
  • Ionic
  • Cordova
In case you don’t have a properly configured development environment take a look at this article: Ionic Framework | Installation Guide.

1. Update Ionic & Cordova

 
Don’t forget to update Ionic and Cordova, older versions may not work with this tutorial:
 
npm update -g cordova ionic
 

2. Create a New Project

 
ionic start IonicOrientationDemo blank
cd IonicOrientationDemo
 
Warning: Since a few of my readers never worked with Ionic CLI. From this point and further, every time I tell you to execute something, do that inside a project folder.
 
At this point, we need to upgrade IonicOrientationDemo project with an appropriate platform. Because I’m using Windows we’re going to create an Android application:
 
ionic platform add android
 
if you’re a MacOS user, create an iOS application like this:
ionic platform add ios
 

3. Install Screen Orientation Plugin

 
Next, we need to import and install screen orientation plugin into a newly created project:
 
cordova plugin add net.yoik.cordova.plugins.screenorientation
 
GitHub
 
 

Development

 
At this point, you should have everything set up and ready, we can begin.
 
Go to IonicOrientationDemo project directory and open main index.html file, add a controller to ion-content directive, like this:
 
  <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content ng-controller="MainCtrl">
      </ion-content>
    </ion-pane>
 
Initialize this controller in app.js file:
 
app.controller('MainCtrl', function($scope) {

});
 
Now add these two buttons:
 
<button class="button button-full button-positive " ng-click="changeOriantationLandspace()">Change To Landspace Mode</button><br/>
<button class="button button-full button-positive " ng-click="changeOriantationPortrait ()">Change To Portrait Mode</button><br/>
 
And for a final touch, we’re going to change page orientation depending on a selected button:
 
app.controller('MainCtrl', function($scope) {
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady()
    {
		$scope.changeOriantationLandspace = function() {
			screen.lockOrientation('landscape');
		}
		
		$scope.changeOriantationPortrait = function() {
			screen.lockOrientation('portrait');
		}	
	}
});
 
This much code should be enough for a skeleton application, just a bare minimum. In the next chapter, I will show you how this application looks.
 
Continue Reading

  • Angelo Rigo

    Hi Gajotres thank´s for the tutorial your blog helps me a lot with Ionic, how can i use ng-cordova deviceorientation plugin? after install : cordova plugin add cordova-plugin-device-orientation can i use the example code into app.js or where ? into android my app turn to landscape to portrait with no problem, at wp8 it stays into portrait , http://ngcordova.com/docs/plugins/deviceOrientation/

    • If you want to lock specific page use this code in associated controller. If you want to lock whole application do it in this state: $ionicPlatform.ready(function() {. Unfortunately, I can’t help you with Windows Mobile platform, I don’t own any device so you will need to google this problem or ask this question at StackOverflow.

  • Very easy and helpful, thanks.

  • Keepz

    Doesn’t work for me, error: “TypeError: screen.lockOrientation is not a function at Scope.$ionicPlatform.ready.$scope.changeOriantationLandspace”

    🙁

    • There are three possibilities:

      1. You haven’t installed the plugin or it’s installed improperly. So install it again, if you receive a warning that plugin already exist, remove it and add it again.
      2. Check if you have a proper Cordova version.
      3. Check if your mobile platform is supported by this plugin.

      • Keepz

        Thank’s for you help! I’ve update ionic and cordova and remove and add again the plugin, now that work on my smartphone but is it normal if that doesn’t work on chrome?

        Thank you!

        • It shouldn’t work in Chrome. Chrome should only be able to recognize current orientation, but plugin is using Java/Objective C code to change orientation so it’s useless on desktop Chrome.

          • Keepz

            Ok thank’s! 🙂

          • Joel Doyle

            This is correct. In Chrome it is undefined. However, in iOS 9.1 ‘screen.lockOrientation(‘portrait’)’ has no effect. The screen can still rotate when the device is rotated. The iOS emulator, however, does not have this issue. The screen is locked in portrait orientation in the emulator

          • Stephan Smith

            I am seeing the same. This solution does not work in IOS. Is there another way to get it to lock?

          • Vicheanak Vannavy

            has anyone got this problem solved yet?

  • Bushra

    Great !! Thank you very much 🙂

  • AndyArmani

    Any way to do this in Ionic 2?