title: Angular + Nativescript Code Sharing Project Remove Action Bar
body: <p>My project is using the Angular + Nativescript code sharing project to build for both web as well as mobile for Android and IOS.</p>
  
  <p>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.</p>
  
  <p>I have tried to add <code>&lt;Page actionBarHidden="true"&gt;&lt;/page&gt;</code> however this did not work at all in <code>app.component</code> or in other components that contain routes such as a <code>home.component</code> with the route <code>home</code>. Such as:</p>
  
  <pre><code>&lt;Page actionBarHidden="true"&gt;
    &lt;StackLayout orientation="vertical"&gt;
      &lt;Image src="res://buy" stretch="none" horizontalAlignment="center"&gt;&lt;/Image&gt;
    &lt;/StackLayout&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>I also tried an approach specifically to android to see if I could fix this through the <code>AndroidManifest.xml</code> 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 <code>styles.xml</code> such as:</p>
  
  <pre><code>&lt;style name="AppThemeNoActionBar" parent="AppTheme"&gt;
      &lt;item name="windowActionBar"&gt;false&lt;/item&gt;
      &lt;item name="windowNoTitle"&gt;true&lt;/item&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>After these failed attempts I tried the following code that was recommend by others involving <code>Page</code> such as:</p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>The problem with this approach is for this solution to work I need to create a <code>tns</code> 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 <code>tns</code> file for all components that have a route.</p>
  
  <p>Lastly, I saw an example where we have a service that has this logic for <code>this.page.actionBarHidden</code> as well as <code>rootFrame.actionBarVisibility = 'never'</code> and you would call that in the <code>component.ts</code> file without needing to create a <code>component.tns.ts</code> 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 <code>tns</code> file of that service for the actual logic, as well as have to call it in every component that has a route.</p>
  
  <p>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.</p>
  
  <p>I will continue to look into this as well as I believe there has to be a clean solution to this.</p>