Nativescript-angular: 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: https://github.com/NativeScript/nativescript-angular/issues/1439#issuecomment-406522534

[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)

[jktaylor21]

@vakrilov is there any way to globally disable the action bar for all pages? I'm converting my app to use schematics (adding web support) and I'm trying to tease out the nativescript specific stuff from my components. I haven't been able tease out the page DI though since I need it to hide the action bar so I am currently stuck with nativescript specific components so I can hide the action bar.

Any ideas would be appreciated, oh, and sorry for commenting on a closed issue. :-)

[jktaylor21]

FYI - just in case anyone else stumbles on this thread. I was able to solve my problem with the following simple method:

    hideActionBar() {
        const rootFrame = topmost();
        rootFrame.actionBarVisibility = 'never';
    }

That method lives in a service with a nativescript implementation (above) and a web implementation (empty) and it gets called from ngOnInit() for the components that have to worry about hiding the action bar. That allowed met to only have one component file.

[KissBalazs]

For any1 late for this party:

• actionBar cannot be hidden from app.component (root component)
• you either need to hide it in every component, or,
• if your root component contains app-router, you can set this parameter to hide it <page-router-outlet actionBarVisibility="never"></page-router-outlet>