How can I change the iOS status bar color with nativescript, angular2 and typescript? - angularjs

Question

So i've found this npm package:
https://www.npmjs.com/package/nativescript-statusbar
But i'm not able to use a Page element since i'm using angular and typescript.
I already made this:
this.page.backgroundSpanUnderStatusBar= true;
But my Background color is black.
I would need the light status bar from iOS.
Is this possible right now?
Any help much appreciated!

Answer 1

With angular2 in nativescript you can just register and element in your component:
registerElement("StatusBar", () => require("nativescript-statusbar").StatusBar);
And in your view use the tag you created, in that case StatusBar:
<StatusBar ios:barStyle="light" android:barStyle="red"></StatusBar>

Answer 2

You can try the following
import {Component } from "angular2/core";
import frameModule = require("ui/frame");
#Component({
selector: "my-app",
template: `
<StackLayout orientation="vertical">
<Label [text]="message" class="title" (tap)="message = 'OHAI'"></Label>
</StackLayout>
`,
})
export class AppComponent {
ngOnInit() {
var page = frameModule.topmost().currentPage;
page.backgroundSpanUnderStatusBar = true;
if(page.ios){
page.ios.navBarVisibility = "always";
var controller = page.ios.controller;
var navigationBar = controller.navigationBar;
navigationBar.barStyle = 2; // different styles from 0 to 3
}
}
}
More about the possibilities of styling the iOS navigation bar you can find in this tutorial here

Answer 3

Earlier I used 'nativescript-statusbar' package for changing status bar background in my Angular/NativeScript apps. But it leads to problems with the status bar on landscape mode.
So I found a better solution:
import { Page } from "ui/page";
#Component({...})
export class YourAnyComponent {
public constructor(private page: Page) {}
ngOnInit() {
this.page.backgroundColor = '#2c303a';
this.page.backgroundSpanUnderStatusBar = true;
this.page.actionBarHidden = false; // if you want to show only statusbar or - true if you want to show both stutus bar and action bar
}
}