How to use a NativeScript UI Component plugin designed for vanilla {N}?


#1

So I’m Using NG2 and TS for my app. However I find a lot of modules written in XML and use the “<Page xmlns” syntax which my HTML files don’t like. How can I use modules that use xmlns such as this card-view module? https://www.npmjs.com/package/nativescript-cardview


#2

You will want to import the following in your app.component.ts (root component):

import { registerElement } from 'nativescript-angular/element-registry';
registerElement('CardView', () => require('nativescript-cardview').CardView);

Then you can simply use as a standard component in any of your views:

<CardView>
  <StackLayout>
    <Label text="Sweet CardView"></Label>
  </StackLayout>
</CardView>

You can also view a video on how to integrate ui plugins like this here:


#3

Thanks for this @wwwalkerrun I was able to get several plugins to work with this method!
However, a couple of plugins including the Card-View ironically give an error which leads me to believe thatAngular is not able to find the exported class in the node_modules which was installed via npm. I’ve checked to make sure I’m requiring the correct class and it appears that I am. Any thoughts?

home.html

 <StackLayout>     
      <CardView class="cardStyle" margin="10" elevation="40" radius="5">
           <GridLayout rows="200, auto, auto" columns="auto, auto, *">
               <image src="~/images/batman.jpg" stretch="aspectFill" colSpan="3" row="0" ></image>
               <label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" ></label>  
               <button text="DECLINE" tap="goAway" row="2" col="0" ></button>
               <button text="ACCEPT" row="2" col="1" ></button>
           </GridLayout>
       </CardView>
   </StackLayout>

home.component.ts

import { Component, OnInit, ViewChild, ElementRef } from "@angular/core";
import { registerElement, ViewClass } from "nativescript-angular/element-registry";
registerElement("CardView", () => require("nativescript-cardview").CardView);

Error

JS:     at DebugAppView.View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:28:27)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9354:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9447:48)
JS:     at ViewContainer.detectChangesInNestedViews (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9519:41)
JS:     at DebugAppView.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:41:14)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9354:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.Whattodo/files/app/tns_modules/@angular/core/bundles/core.umd.js:9447:48)
JS:     at DebugAppView.View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:40:19)
JS: ERROR CONTEXT:
JS: [object Object]
JS: Error: Error in :0:0 caused by: Cannot read property 'nativeElement' of undefined
9:54:10 PM - Compilation complete. Watching for file changes.

#4

If possible to share project, I could take a look, but make sure those npm dependencies are all saved and in your package.json dependencies section.


#5

Also make sure you use tns plugin add command and not just npm install for plugins.


#6

Thanks @wwwalkerrun, @bradwaynemartin,

It turns out all I needed to do was uninstall the npm module, delete the reference in package.json, and reinstall it via tns like you said as well as through npm.

Everything’s working great now!


#7

could you categorize this as ‘solved’ if you are comfortable doing so?