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.