Angular + Nativescript Code Sharing Project Remove Action Bar

Question

My project is using the Angular + Nativescript code sharing project to build for both web as well as mobile for Android and IOS.

The problem is trying to remove the Action Bar for the entire application. I have read a few posts on this issue however none of the solutions seem to work or at the very least end up not being a very good solution.

I have tried to add <Page actionBarHidden="true"></page> however this did not work at all in app.component or in other components that contain routes such as a home.component with the route home. Such as:

<Page actionBarHidden="true">
  <StackLayout orientation="vertical">
    <Image src="res://buy" stretch="none" horizontalAlignment="center"></Image>
  </StackLayout>
</Page>

I also tried an approach specifically to android to see if I could fix this through the AndroidManifest.xml file like I would if I made a native Android App by updating the android manifest to take away the action bar. For a sanity test I also tried using it through styles.xml such as:

<style name="AppThemeNoActionBar" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

After these failed attempts I tried the following code that was recommend by others involving Page such as:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

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

The problem with this approach is for this solution to work I need to create a tns file for every component that has a route just to call this to remove the app bar completely because each page seems to handle their own app bar. Now this is not really maintainable on a large scale as well as it forces me to create a tns file for all components that have a route.

Lastly, I saw an example where we have a service that has this logic for this.page.actionBarHidden as well as rootFrame.actionBarVisibility = 'never' and you would call that in the component.ts file without needing to create a component.tns.ts file however the problem with this is now you need to create a regular service that has an empty function to be called, create a tns file of that service for the actual logic, as well as have to call it in every component that has a route.

As you can see some solutions will not work at all and others require a lot of extra code and maintainability especially as the app grows making them not very desirable solutions.

I will continue to look into this as well as I believe there has to be a clean solution to this.

Answer 1

You may simply set actionBarVisibility to never on your page-router-outlet itself.

<page-router-outlet actionBarVisibility="never"></page-router-outlet>