How to use nativescript-orientation plugin in typescript & Angular 2 in nativescript?

Question

I'm going to use nativescript-orientation plugin in my project. https://github.com/NathanaelA/nativescript-orientation#argslandscape--true--false

I want to change all layout when orientation changes automatically. So I'm going to use this function.

exports.orientation(args)
args.landscape = true | false
args.page (depreciated) or args.object = the current page

But I don't know how to insert it in my typescript & angluar 2 project.

    import { Component, OnInit } from "@angular/core";
    var Orientation = require( "nativescript-orientation" );
    @Component({
        selector: "my-app",
        templateUrl: "app.component.html",
    })
     export class AppComponent implements OnInit {
        public counter: number = 16;
         public get message(): string {
            if (this.counter > 0) {
                return this.counter + " taps left";
            } else {
                return "Hoorraaay! \nYou are ready to start building!";
            }
        }
        ngOnInit(){
            console.log(Orientation.getOrientation()+"--phone"); 
        }
        public onTap() {
            this.counter--;
        }
   }

export function orientation(args){
}

Nick Iliev Nick Iliev · Accepted Answer · 2017-01-25T10:50:24

You just need to add the CSS rules for your landscape/portrait modes and you are good to go.

r.g. app.css

.btn {
    font-size: 18;
}

.landscape Button {
    background-color: red;
    color: white;
}

.landscape StackLayout {
    background-color: gray;
}

app.component.ts

import { Component} from "@angular/core";
var orientation = require('nativescript-orientation');

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {

    public onTap() {
        console.log(orientation.getOrientation());  
    }
}

app.component.html

<StackLayout class="p-20">
    <Label text="Tap the button" class="h1 text-center"></Label>
    <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
    <Button text="Sample Button"></Button>
</StackLayout>

Full working demo here (once the app loads manually rotate the screen)

How to use nativescript-orientation plugin in typescript & Angular 2 in nativescript?

1 Answers