npm i --save @microexcel-csd/nativescript-hide-action-bar

NativeScript Hide Action Bar

Short demo of NativeScript Hide Action Bar in action


This is a simple plugin for the Angular flavor of NativeScript. With it, you can hide the ActionBar of any view by adding the directive to an element anywhere in the component.

This is especially useful for NativeScript code sharing projects as trying to access the Page object in a component would break your web build.


From the root folder of your project, execute the following command:

tns plugin add @microexcel-csd/nativescript-hide-action-bar


Once the plugin is added to your project, you need to add the HideActionBarModule to your imports array in your desired feature module or the SharedModule:

    import { HideActionBarModule } from '@microexcel-csd/nativescript-hide-action-bar';

// ...
imports: [
// ...
// ...
export class SharedModule { }

NOTE: Simply importing the HideActionBarModule into your AppModule will not work.

Afterwards, simply add the directive to any element as follows:

<Label hideActionBar text="Sayonara, ActionBar!"></Label>

You'll want to make sure that the element is actually present on the page. For example, an element nested within an *ngIf that evaluates to false will not cause the ActionBar to be hidden.

Support Our Packages