ActionBar action items not working

[aaweb]

Hey Nathan

I tried adding some action items to the home component as also demonstrated in the NativeScript docs (https://docs.nativescript.org/ApiReference/ui/action-bar/HOW-TO):

    <ActionBar title="Angular 2 Seed Advanced"> 
      <ActionBar.actionItems>
        <ActionItem text="right" ios.position="right"></ActionItem>
      </ActionBar.actionItems>
    </ActionBar>

However, I am getting an error:

EXCEPTION: Error: Uncaught (in promise): TypeError: view._inheritProperties is not a function. (In 'view._inheritProperties(this)', 'view._inheritProperties' is undefined)

I also had a look at the ActionBarUtil class and can set items like that, but I'd still prefer to just to it in the template and use existing bindings. Is this something particular with the way this seed works or shouldn't the sample code just work?

Thanks a lot!

[NathanWalker]

Hi @aaweb, you will want to use nativescript-angular specific markup here. A good place to look at the moment is the ng-sample app inside the nativescript-angular repo. There's several examples, but here's one specific to ActionBar and items: https://github.com/NativeScript/nativescript-angular/blob/master/ng-sample/app/examples/action-bar/action-bar-test.ts

From your example above, basically change to this:

<ActionBar title="Angular 2 Seed Advanced">
  <ActionItem text="right" ios.position="right"></ActionItem>
</ActionBar>

[NathanWalker]

You might want to bookmark this page: https://www.nativescript.org/nativescript-is-how-you-build-native-mobile-apps-with-angular

It is still under development but more nativescript-angular specific documentation will be there soon.

[aaweb]

I tried that too, but without success.

Repro:

1. Vanilla checkout of angular2-seed-advanced
2. Added ActionItem in home.component.html as you did
3. Running gets the following error:

Apr 18 17:57:51 macbook-pro-3 nativescript[49869]: CONSOLE LOG file:///app/tns_modules/nativescript-angular/application.js:79:36: ANGULAR BOOTSTRAP DONE.
Apr 18 17:57:51 macbook-pro-3 nativescript[49869]: *** JavaScript call stack:
    (
        0   setRightBarButtonItemsAnimated@[native code]
        1   populateMenuItems@file:///app/tns_modules/ui/action-bar/action-bar.js:113:54
        2   update@file:///app/tns_modules/ui/action-bar/action-bar.js:90:31
        3   ngOnInit@file:///app/tns_modules/nativescript-angular/directives/action-bar.js:71:35
        4   detectChangesInRecordsInternal@:20:107
        5   detectChangesInRecords@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:104:48
        6   runDetectChanges@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:81:36
        7   _detectChangesInViewChildren@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:181:34
        8   runDetectChanges@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:85:42
        9   _detectChangesContentChildren@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:174:34
        10  runDetectChanges@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:82:43
        11  _detectChangesInViewChildren@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:181:34
        12  runDetectChanges@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:85:42
        13  detectChanges@file:///app/tns_modules/angular2/src/core/change_detection/abstract_change_detector.js:70:89
        14  detectChanges@file:///app/tns_modules/angular2/src/core/change_detection/change_detector_ref.js:21:86
        15  forEach@:1:11
        16  tick@file:///app/tns_modules/angular2/src/core/application_ref.js:387:45
        17  @file:///app/tns_modules/angular2/src/core/application_ref.js:304:133
        18  invoke@file:///app/tns_modules/zone.js/dist/zone-node.js:281:34
        19  onInvoke@file:///app/tns_modules/angular2/src/core/zone/ng_zone_impl.js:44:47
        20  invoke@file:///app/tns_modules/zone.js/dist/zone-node.js:280:43
        21  runGuarded@file:///app/tns_modules/zone.js/dist/zone-node.js:188:54
        22  @file:///app/tns_modules/angular2/src/core/application_ref.js:304:108
        23  @file:///app/tns_modules/angular2/src/facade/async.js:122:56
        24  __tryOrUnsub@file:///app/tns_modules/rxjs/Subscriber.js:166:20
        25  next@file:///app/tns_modules/rxjs/Subscriber.js:115:34
        26  _next@file:///app/tns_modules/rxjs/Subscriber.js:74:30
        27  next@file:///app/tns_modules/rxjs/Subscriber.js:51:23
        28  _finalNext@file:///app/tns_modules/rxjs/Subject.js:124:34
        29  _next@file:///app/tns_modules/rxjs/Subject.js:116:28
        30  next@file:///app/tns_modules/rxjs/Subject.js:73:19
        31  emit@file:///app/tns_modules/angular2/src/facade/async.js:111:80
        32  _checkStable@file:///app/tns_modules/angular2/src/core/zone/ng_zone.js:140:48
        33  setMicrotask@file:///app/tns_modules/angular2/src/core/zone/ng_zone.js:116:35
        34  onHasTask@file:///app/tns_modules/angular2/src/core/zone/ng_zone_impl.js:56:47
        35  hasTask@file:///app/tns_modules/zone.js/dist/zone-node.js:340:65
        36  _updateTaskCount@file:///app/tns_modules/zone.js/dist/zone-node.js:357:34
        37  invokeTask@file:///app/tns_modules/zone.js/dist/zone-node.js:318:43
        38  runTask@file:///app/tns_modules/zone.js/dist/zone-node.js:214:58
        39  drainMicroTaskQueue@file:///app/tns_modules/zone.js/dist/zone-node.js:432:43
        40  promiseReactionJob@:1:11
        41  UIApplicationMain@[native code]
        42  start@file:///app/tns_modules/application/application.js:233:26
        43  @file:///app/tns_modules/nativescript-angular/application.js:65:26
        44  ZoneAwarePromise@file:///app/tns_modules/zone.js/dist/zone-node.js:542:38
        45  nativeScriptBootstrap@file:///app/tns_modules/nativescript-angular/application.js:64:23
        46  anonymous@file:///app/app.js:24:36
        47  evaluate@[native code]
        48  moduleEvaluation@:1:11
        49  @:8:48
        50  promiseReactionJob@:1:11
    )
Apr 18 17:57:51 macbook-pro-3 nativescript[49869]: *** Terminating app due to uncaught exception 'NSRangeException', reason: '*** -[__NSArrayM objectAtIndex:]: index 0 beyond bounds for empty array'

I also tried adding the directives to app.ts as I thought they were not available, but with the same result:

import {NS_ROUTER_PROVIDERS, NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
import {NS_DIRECTIVES} from 'nativescript-angular/directives';
...
nativeScriptBootstrap(NSAppComponent, [
  ..
  provide(PLATFORM_DIRECTIVES, { useValue: [NS_ROUTER_DIRECTIVES, NS_DIRECTIVES], multi: true })
  ..
]);

Thanks for link, @NathanWalker. I realize it's early days, hope these reports and questions are helpful.

[NathanWalker]

N/p @aaweb so yes if you are using ActionItem with the first route component, there is a workaround required. In your bootstrap, modify like so:

nativeScriptBootstrap(AppComponent, [
  ..
  your providers
  ..
], { startPageActionBarHidden: false }); // https://github.com/NativeScript/nativescript-angular/issues/121

👍

[NathanWalker]

@aaweb lemme know if that worked for you?

[aaweb]

The workaround worked! Thanks so much.

[haroldSanchezb]

Hi, I see on my code sample that

platformNativeScriptDynamic().bootstrapModule(AppModule);

so, where I add startPageActionBarHidden?