nativescript-angular: and tags do not work inside ActionBar

There seems to be an issue when trying to use <ios> and <android> tags inside of an ActionBar that cause the app to crash.

 <ActionBar title="test">
      <ios>
          <ActionItem icon="res://ic_menu" ios.position="left" (tap)="openDrawer()"></ActionItem>
      </ios>
      <android>
          <NavigationButton icon="res://ic_menu" (tap)="openDrawer()"></NavigationButton>
      </android>
 </ActionBar>

However, outside of ActionBar this works.

<StackLayout class="mainStackLayout">
    <android>
        <Label [text]="mainContentText" textWrap="true" class="drawerContentText"></Label>
        <Button text="OPEN DRAWER" (tap)=openDrawer()></Button>
        <Button text="LIST VIEW" [nsRouterLink]="['/list']"></Button>
    </android>
    <ios>
        <Button text="ACCOUNT VIEW" [nsRouterLink]="['/account']"></Button>
    </ios>
</StackLayout>

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

@tsonevn When it is essential and often used, why don’t we ship it as built-in directive within NativeScript Angular package.

manojdcoder on Jun 13, 2017

@tsonevn - I won’t pretend to know all the details about angular or the integration. I’ve been working on several NG apps lately and coming from plain NS background I always default to <android> & <ios> tags for platform specific nodes in my templates. Is there reasoning this doesn’t work with the angular integration? What would it take to make this possible? After DevDays I wouldn’t mind working on helping get this done. I am thinking something like the directive @vakrilov has come up with should ship with the core and be available or support for the platform nodes similar to plain NS apps. At any rate, any info on concerns or limitations from the team are appreciated.

bradmartin on Sep 13, 2017

Agree - reopening the issue since this is causing a lot of confusion. For now you can fallback to this workaround.

@NickIliev can you add a note in the docs about <ios>/<android> directives not working inside the ActionBar?

vakrilov on Apr 24, 2017

Just an update you can even define a set of if-platform directives that are similar to ngIf and you can use them instead of <ios> and <android>. Here is gist with an implementation.

vakrilov on Jul 28, 2016

@vakrilov Disclaimer added in the documentation article for ActionBar with this PR

NickIliev on Apr 24, 2017

@vakrilov platform-specific attribute visibility is also not working (for both Android and iOS) e.g.

<ActionBar title="Hello">
    <NavigationButton icon="res://icon" ios:visibility="collapse"></NavigationButton>
    <ActionItem icon="res://icon"  ios.position="left" android:visibility="collapse"></ActionItem>
</ActionBar>

@arnaudvalle , @mishapinky as a workaround for your Actionbars you can hide your Action items in NativeScript + Angular-2 using *ngIf directive. More information about this functionallity can be found at the following link: http://docs.nativescript.org/angular/ui/action-bar.html#hiding-action-items

Basically *ngIf directive removes or recreates a portion of your code (while expecting a boolean value)

For example:

<ActionBar title="Hello">
    <NavigationButton icon="res://icon" *ngIf="isNavVisible"></NavigationButton>
    <ActionItem icon="res://icon" ios.position="left" *ngIf="isItemVisible"></ActionItem>
</ActionBar>


import application = require("application");
@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit {

    isNavVisible:boolean = false;
    isItemVisible:boolean = false;

    ngOnInit() {
        if (application.ios) {
            this.isNavVisible = false;
            this.isItemVisible = true;
        } else if (application.android) {
            this.isNavVisible = true;
            this.isItemVisible = false;
        }
    }
}

NickIliev on Aug 3, 2016

@NickIliev just to confirm this works fine for me with your workaround. Thanks again!

arnaudvalle on Jul 25, 2016