Nativescript: I can not remove my actionbar in my component...

[phantoxe]

Hi guy... i just have this code in my component:

login.component.html

But every time that i run TNS RUN ANDROID... my app have a ACTIONBAR with the name of my APP... :-( I want create a simples LOGIN PAGE. Check my routes:

app-routing.module.ts

const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", loadChildren: "./login/login.module#LoginModule" },
{ path: "profile", loadChildren: "./profile/profile.module#ProfileModule" },
{ path: "photos", loadChildren: "./photos/photos.module#PhotosModule" },
{ path: "videos", loadChildren: "./videos/videos.module#VideosModule" },
{ path: "reviews", loadChildren: "./reviews/reviews.module#ReviewsModule" },
{ path: "settings", loadChildren: "./settings/settings.module#SettingsModule" }
];

Can u help me please?

[NickIliev]

Hello @phantoxe

To remove the default ActionBar from your page you can use actionBarHidden boolean property of Page.

For example:

import { Page } from "ui/page"

// in your Login's component constructor inject the Page and set the action bar to be hidden
constructor(private _page: Page) {
    this._page.actionBarHidden = true;
}

[d4rkd0s]

@NickIliev instead of doing this for every component what is an alternative approach to removing the ActionBar from my entire app? I saw things like setting createFrameOnBootstrap to false and also startPageActionBarHidden to true which appears to be no longer used? (https://github.com/NativeScript/nativescript-angular/issues/1471#issuecomment-411022522)

If I set createFrameOnBootstrap to true I see two action bars so I think there's another place I should be looking but my application.

[decmurphy]

@d4rkd0s - any joy with this? I have the same issue of not wanting to set actionBarHidden on every component, and also seeing two ActionBars when I set createFrameOnBootstrap to true

Additionally, actionBarHidden can not be set in app.component :(

[d4rkd0s]

@decmurphy Yeah I'm still having to deal with this. However a recent possible solution was posted over on this issue: https://github.com/NativeScript/nativescript-angular/issues/353#issuecomment-453624824

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.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.