Hiding action bar for android

[ahmedelgendy]

I want to hide the action bar for Android
I tried actionBarHidden="true" but didn't work because I am using native script with Angular2 and I can't use the <page> tag due to an error
Are there any solutions to hide it for all activities?
Thanks

[vakrilov]

For the initial page you can use the startPageActionBarHidden property of the in the application options when bootstrapping you app. Docs link.
Update: You can use the next approach in all cases now. The startPageActionBarHidden is deprecated

For subsequent page navigations you can inject the Page in your component and use actionBarHidden. Docs link

Hope that helps.

[ahmedelgendy]

Oh thank you

[dianjuar]

Just for the record

import { Component, OnInit } from '@angular/core';

import { Page } from "ui/page";

export class YourComponent implements OnInit {

    constructor(private _page: Page) { }

    ngOnInit() {
        this._page.actionBarHidden = true;
    }
}

---

Is not better if the documentation is improved @vakrilov ?
I face the same problem and the documentation doesn't tell any of this.

https://docs.nativescript.org/angular/code-samples/ui/action-bar.html

[vakrilov]

@dianjuar You are absolutely right!
@NickIliev Can you please update the angular action-bar article with a section about startPageActionBarHidden when bootstrapping angular app.

[NickIliev]

@vakrilov it appears this is already done in this article section

[erkanarslan]

This option was working prior to Nativescript 4 but doesn't work anymore.

[NickIliev]

@erkanarslan than you for noticing that - I will investigate the case.

Meanwhile, as a workaround, you could explicitly hide the action bar on the page it is shown while directly accessing the Page instance via DI.

constructor(private itemService: ItemService, private _page: Page) { 
    this._page.actionBarHidden = true;
}

Update: confirmed as unexpected behavior and logged as a bug here

[d4rkd0s]

So I've tried myself and the action bar is still showing... hmm...

import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({
    selector: "Auth",
    moduleId: module.id,
    templateUrl: "./auth.component.html",
    styleUrls: ["./auth.component.css"]
})
export class AuthComponent implements OnInit {
    constructor(private _page: Page) {
        // Hides the action bar, that appears on android
        this._page.actionBarHidden = true;
    }

    ngOnInit(): void {

    }
}

Also tried

import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({
    selector: "Auth",
    moduleId: module.id,
    templateUrl: "./auth.component.html",
    styleUrls: ["./auth.component.css"]
})
export class AuthComponent implements OnInit {
    constructor(page: Page) {
        // Hides the action bar, that appears on android
        page.actionBarHidden = true;
    }

    ngOnInit(): void {

    }
}

For ref my auth component html is:

<FlexboxLayout>
    <StackLayout>
        <Image src="~/assets/images/logo.png"></Image>
        <Button text="Login"></Button>
        <Button text="Register"></Button>
    </StackLayout>
</FlexboxLayout>

Also I have it turned off in my main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";

platformNativeScriptDynamic({ createFrameOnBootstrap: true, startPageActionBarHidden: true }).bootstrapModule(AppModule);

[d4rkd0s]

Ahh! I figured it out, so you can't have createFrameOnBootstrap: true in your main.ts and expect the ActionBar to go away, so you must set it to createFrameOnBootstrap: false I found my answer here: #1439 (comment)

[larssn]

@vakrilov Your link http://docs.nativescript.org/angular/core-concepts/customizing-bootstrap.html#nativescript-application-options is broken. Could you fix it?

[vakrilov]

Thanks @larssn
I have updated the comment - no need to use the startPageActionBarHidden - you should be able to do this in a similar way for all pages (the 2nd approach in the answer)