CODEWITHSUNDEEP
androidiosangularnativescriptangular7
Nevenoe
Nevenoe

Reputation: 1052

Issue when trying to hide Action Bar with shared code

I've build an Angular + nativescript app. I'm trying to hide the action bar (like a lot of people).

I've made two service helpers. Both have same signature. One is for web and the other is for mobile. For the mobile helper, I deal with the TNS Page component which I inject.

But when I run mobile app, the action bar is always here.

Helpers

action-bar-helper.service.tns.ts:

import { Injectable } from "@angular/core";
import { Page } from "tns-core-modules/ui/page/page";
@Injectable()
export class ActionBarHelperService {  
    constructor(private page: Page){

    }

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

action-bar-helper.service.ts:

import { Injectable } from "@angular/core";

@Injectable()
export  class ActionBarHelperService {    
    constructor(){}
    hideActionBar(){}
}

Shared component for mobile and web

login.component.ts:

@Component({
  selector: 'app-login',
  moduleId: module.id,
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent{

  constructor(private actionBarHelperService: ActionBarHelperService) 
  {
    this.actionBarHelperService.hideActionBar();
  }
}

In addition, I've set createFrameOnBootstrap to true in main.tns.ts:

import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
import { AppModule } from './app/app.module';

platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(AppModule);

I don't know if that help, but when I run my emulator and I do not set this to true, I've an error which says than page is null:

Successfully synced application org.nativescript.docdoc on device emulator-5554.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ERROR TypeError: Cannot set property 'actionBarHidden' of null
JS: ERROR CONTEXT {
JS:   "view": {
JS:     "def": {
JS:       "nodeFlags": 33669121,
JS:       "rootNodeFlags": 33554433,
JS:       "nodeMatchedQueries": 0,
JS:       "flags": 0,
JS:       "nodes": [
JS:         {
JS:           "nodeIndex": 0,
JS:           "parent": null,
JS:           "renderParent": null,
JS:           "bindingIndex": 0,
JS:           "outputIndex": 0,
JS:           "checkIndex": 0,
JS:           "flags": 33554433,
JS:           "childFlags": 114688,
JS:           "directChildFlags": 114688,
JS:           "childMatchedQueries": 0,
JS:           "matchedQueries": {},
JS:           "matchedQueryIds": 0,
JS:           "references": {},
JS:           "ngContentIndex": null,
JS:           "childCount": 1,
JS:           "bindings": [],
JS:           "bindingFlags": 0,
JS:           "outputs": [],
JS:           "element": {
JS:             "ns": "",
JS:             "name": "app-login",
JS:             "attrs": [],
JS:             "template": null,
JS:             "componentProvider": {
JS:               "nodeIndex": 1,
JS:               "parent": "[Circular]",
JS:               "renderParent": "[Circular]",
JS:               "bindingIndex":...

Any ideas or solutions?

SOLUTION:

Thanks to @Manoj, I've write a directive. See below:

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

@Directive({
  selector: '[hideActionBar]'
})
export class HideActionBarDirective {
  constructor(private page: Page) {
    this.page.actionBarHidden = true;
  }
}

and now in my login.component.tns.html:

<StackLayout hideActionBar>
    <Button text="login works!" class="btn btn-primary"></Button>
</StackLayout>

Upvotes: 2

Views: 776

Answers (2)

Manoj
Manoj

Reputation: 21908

Since ActionBarHelperService is a dependency for LoginComponent, the service must be instantiated even before the page was created.

May be you could pass the page as an argument to hideActionBar method Or simply set the visibility attribute on ActionBar tag in login.component.html Or use a directive instead of service.

Upvotes: 1

Narendra
Narendra

Reputation: 4574

ActionBarHelperService is expecting a argument(page) in Constructor(

constructor(private page: Page)

) but when you are creating an instance of it in login.component.ts by doing the following way no aruguments is getting passed in ActionBarHelperService

constructor(private actionBarHelperService: ActionBarHelperService)

Upvotes: 1

Related Questions