Nativescript-angular: <ios> and <android> tags do not work inside ActionBar

[mishapinky]

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>

[NickIliev]

@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;
        }
    }
}

[arnaudvalle]

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

[vakrilov]

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.

[robbdimitrov]

<ios>
    <ActionBar title="iOS" class="action-bar">

    </ActionBar>
</ios>
<android>
    <ActionBar title="Android" class="action-bar">

    </ActionBar>
</android>

March 2017 and this isn't working at all... Executes both sections on iOS. The code above produces 'Android' actionbar. Basically the last one is being applied.

[chrillewoodz]

I don't understand the whole ic_menu icon thing, according to this list:

https://developer.android.com/reference/android/R.drawable.html

That's not even an icon.. Needless to say it doesn't show up in my project when I try to use it.

[odubuc]

I have to agree with @robbdimitrov, this is still a bug in 2.5.4.
On both platform, the last ActionBar will always be applied and if it is inside it will not render..

I guess this should be re-opened or the documentation should be fixed since everyone reading it will end up here anyways...

Thanks for the workaround

[vakrilov]

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?

[NickIliev]

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

[tsonevn]

Hi @all.
After a discussion, we conclude that the most appropriate way to define platform specific UI is to use custom directive for NativeScript Angular 2 project, which will verify the platform type and will show the needed HTML code.
For further help, you could review this example here, where a similar example is shown.

[manojdcoder]

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

[tsonevn]

Hi @mishapinky,
This is only one way, which you could do that. You could also use some of available NG Directives, such as *ngIf. https://github.com/NativeScript/nativescript-sdk-examples-ng/tree/master/app/ui-category/ng-directives/ngif-directive. In this case, there is no need to built-in this custom directive within NativeScript Angular package

[bradmartin]

@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.

[vakrilov]

Hey @bradmartin. There are cases in which <android>/<ios> components do not work (for example in action-bar (the current issue). It is because the <android> and <ios> are actually regular components that have a conditional logic to show their contents (or not) based on the platform. However, you are not allowed to put just any component inside the action-bar - it should be an actionBarItem.
There might be other cases in which the <android> and <ios> do not work. Can you share some of your code so that we can investigate.

[ChirantanPatel]

hi @NickIliev
when I add Page tag in HTML view then Page tag between layout or context not display in IOS platform. In Android Platform working good. it's not working ios. so plz help me how to fix it. thanks in advance.

[NickIliev]

@ChirantanPatel can you please provide a link to a sample project or Playground demo demonstrating your issue - not exactly sure what you mean by when I add Page tag in HTML view then Page tag between layout or context

[aosi87]

still not working...