4

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!

Hristo Eftimov
  • 13,845
  • 13
  • 50
  • 77
olivier
  • 2,585
  • 6
  • 34
  • 61

4 Answers4

6

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.

George Edwards
  • 8,979
  • 20
  • 78
  • 161
  • Thank you, but now i get the error property page does not exist on type HomePage( my class ) – olivier Apr 21 '16 at 16:31
  • Thank you, can you explain me what page: Page does? And second, i get the error can not find topmost, but i'll try it with somthing else than topmost. :) – olivier Apr 21 '16 at 16:35
  • @olivier ahh, sorry - you need to have `import {Page} from "ui/page";` at the top of your component and `import {topmost} from "ui/frame";` – George Edwards Apr 21 '16 at 16:37
6

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

Community
  • 1
  • 1
Hristo Eftimov
  • 13,845
  • 13
  • 50
  • 77
  • Yes, this worked, however I don't understand why do we need to import another component to hide something... – Csaba Oct 16 '17 at 14:22
1

The property actionBarHidden only works on the <Page> component. Don't think you can apply it to a <StackLayout>. You also don't have to specify orientation="vertical" on a <StackLayout> it's vertical by default. Unless there is a specific use case you are trying to achieve that isn't mentioned here :)

https://docs.nativescript.org/ApiReference/ui/page/Page.html

Just another tip - you can self close <Image /> no need for the </Image> tag.

Brad Martin
  • 5,637
  • 4
  • 28
  • 44
  • Thank you! Can you explain me where i can hide the action bar? – olivier Apr 21 '16 at 15:35
  • You already have it on the `` component in the one snippet. That is the only place where that property works, it's in the documentation page in my first comment. So you cannot use it on ``. – Brad Martin Apr 21 '16 at 15:39
  • Ok, thanks, but i copied it from here: https://github.com/NativeScript/NativeScript/blob/master/apps/action-bar-demo/pages/action-bar-hidden.xml – olivier Apr 21 '16 at 15:49
  • Well what you have isn't an exact copy, but that is the correct way to hide the ActionBar. If you need further clarification let me know. – Brad Martin Apr 21 '16 at 16:22
0

Try this....

import { Page } from "tns-core-modules/ui/page";

export class YourComponent implements OnInit {

   public constructor(private router: RouterExtensions, private page: Page) {
   
   }

   public ngOnInit() {
     this.page.actionBarHidden = true;
   }

}
Vince Phan
  • 1