Nativescript-angular: NavigationButton is not a valid View instance

[giovannicandido]

Code:

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

The second code works fine:

<ActionBar title="CDS Mobile">

        <NavigationButton icon="res://ic_menu" (tap)="openDrawer()"></NavigationButton>

</ActionBar>

Packages:

    "tns-android": {
      "version": "2.3.0"
    },
    "tns-ios": {
      "version": "2.3.0"
    }
  },
  "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/router": "3.1.1",
    "nativescript-angular": "1.1.1",
    "nativescript-floatingactionbutton": "^2.2.5",
    "nativescript-geolocation": "0.0.13",
    "nativescript-google-maps-sdk": "^1.3.14",
    "nativescript-mapbox": "^2.0.0",
    "nativescript-telerik-ui": "^1.4.1",
    "nativescript-theme-core": "^0.1.3",
    "reflect-metadata": "~0.1.8",
    "tns-core-modules": "2.3.0"
  },
  "devDependencies": {
    "babel-traverse": "6.16.0",
    "babel-types": "6.16.0",
    "babylon": "6.13.0",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^2.0.3",
    "zone.js": "~0.6.26"
  }

Error:

ns-renderer: ERROR BOOTSTRAPPING ANGULAR
JS: ns-renderer: Error in ./AndroidFilterComponent class AndroidFilterComponent - inline template:0:12 caused by: NavigationButton is not a valid View instance.
JS:
JS: Error: NavigationButton is not a valid View instance.

[tsonevn]

Hi @giovannicandido,
You could use ngIf or if-platform directives, when you want to specify for which platform the element to be shown. This issue has been related to #350 , where you will find further help, how to use both directives in your project.

Regsrds,
@tsonevn

[giovannicandido]

Thank you @tsonevn
Would be nice if the documentation page https://docs.nativescript.org/angular/ui/action-bar.html, had that information. If I get some time free, I going to update the article.

[dartmann]

Hi there, it would be nice if the mentioned article of @giovannicandido also contains code targeting the side drawer functionality. It only entails text as in: https://docs.nativescript.org/ui/action-bar
Thank you for updating that.
Best regards, David

[tsonevn]

Hi @giovannicandido,
SideDrawer component is provided by nativescript-telerik-ui plugin and it is not part of the core modules.
Regarding that, I think that there is no need to create a separate example with SideDrawer and ActionBar when this plugin has its own documentation.

Let me know if I could assist you further
Regards,
@tsonevn