How to get the initial device orientation in NativeScript with Angular 2

Question

I am getting started with NativeScript + Angular 2 and I'd like to implement a component that activates different routes depending on the device orientation. After much search, I was able to get this working but I haven't yet figured out how to get the initial device orientation, which sounds like it should be easier.

Here's my AppComponent code. Look at ngAfterViewInit:

import {Component, OnInit, OnDestroy, AfterViewInit} from "@angular/core";
import {Router} from "@angular/router";

import _application = require('application');

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
    constructor(private router: Router) {}

    ngOnInit() {
        _application.on(_application.orientationChangedEvent, this.setOrientation.bind(this));
    }

    ngAfterViewInit() {
        // How do I get the initial orientation here instead of hardcoding to 'portrait'?
        this.setOrientation({newValue: 'portrait'})
    }

    ngOnDestroy() {
        _application.off(_application.orientationChangedEvent, this.setOrientation);
    }

    setOrientation(args) {
        if (args.newValue === 'landscape') {
            this.router.navigate(['/landscape']);
        } else {
            this.router.navigate(['/portrait']);
        }
    }
}

Answer 1

private activity:any = application.android.foregroundActivity;
this.activity.getResources().getConfiguration().orientation;

Answer 2

You could use this plugin. In order to get access to the up-to-date version, you will need to pay a monthly subscription to the developers that maintain ProPlugins.

You can installed the last free version of it using:

npm i nativescript-orientation

This comes with no guaranties that it will work, especially in {N} 6+.

Once installed, you can get the current screen orientation like this:

const orientation = require("nativescript-orientation");
console.log(orientation.getOrientation());

Answer 3

While there is no helper to determine the initial orientation that I know of, you can still get the current screen dimensions. You may import the screen module from the core library.

import { screen } from 'tns-core-modules/platform';

Then on application initialization determine the orientation by determining if the screen height is larger than the width:

this.orientation = screen.mainScreen.heightPixels > screen.mainScreen.widthPixels ? 'portrait' : 'landscape';

Edit: This may be inconsistent and is not fully tested (meaning the screen height might not always be the height of the screen in portrait mode). If this is the case, on page load, you may use the same strategy to measure the main Page element and compare the height and width of the view to determine orientation.