How to hide the android actionbar with angular2 and typescript?

Question

I have a simple html file:

<StackLayout orientation="vertical" actionBarHidden="true">
      <Image src="res://buy" stretch="none" horizontalAlignment="center"></Image>
</StackLayout>

But when i use:

<Page actionBarHidden="true">
  <StackLayout orientation="vertical">
      <Image src="res://buy" stretch="none" horizontalAlignment="center"></Image>
  </StackLayout>
</Page>

It breaks the page.. The action bar is not hidden and there is a huge margin between content and action bar.

I use angular2 and typescript for my app.

What's my mistake?

Any help much appreciated!

Answer 1

You can target the page property in your component JS, with something like this:

export class HomePage implements OnInit {
    page: Page;
    ngOnInit() {
        this.page = <Page>topmost().currentPage;
        this.page.actionBarHidden = true;
    }
}

You'll alos need to import import {topmost} from "ui/frame"; and import {Page} from "ui/page";.

That way you don't need the tags (which are implicit in an Angular 2 component).

I hope that helps!

Also, just to follow up on Brad's comments about self-closing tags - you'll find that with Angular, explicit closing tags (as you are doing) work much better.

Answer 2

There is an easier solution. Tested on Angular 4.1.0 and NativeScript 3.0.0

import { Page } from "ui/page";

export class AppComponent {
    constructor(private page: Page) {
        page.actionBarHidden = true;
    }
}

You can control the visibility of the ActionBar from the constructor of your component.

StackOverflow answer: https://stackoverflow.com/a/39962992/2765346