Request to support HTML file templates for Apps using Angular 2 about nativescript-floatingactionbutton

[Headcult]

Yeah!, This is supported now. Here's are the overall steps to get this working with Angular 2:

1. Add these to your dependencies section in your package.json:

   "nativescript-floatingactionbutton": "2.2.1",

2. Run npm install.

3. Add the following lines before you bootstrap (nativeScriptBootstrap) your app:

   import {registerElement} from "nativescript-angular/element-registry";
   registerElement("FAB", () => require("nativescript-floatingactionbutton").Fab);

4. Now, you can use the FAB in your templateURL (HTML files) as you wish like shown below:

          <FAB tap="fabTap"
                row="1"
                icon="res://icon"
                rippleColor="#f1f1f1"
                class="fab-button">
       </FAB>
   

5. Add the following to your app.css for styling:

   .fab-button {
   height: 70;
   margin: 15;
   background-color: #ff4081;
   horizontal-align: right;
   vertical-align: bottom;
   }

6. If you run into an error like this while running tns run android:

   Exception in thread "main" java.lang.IllegalArgumentException: Class com.tns.internal.AppBuilderCall
   back conflict: \platforms\android\build\intermediates\classes\debug and
   \platforms\android\build\intermediates\classes\nativescriptcardview
   debug
   at com.telerik.metadata.ClassRepo.cacheJarFile(ClassRepo.java:21)
   at com.telerik.metadata.Builder.build(Builder.java:41)
   at com.telerik.metadata.Generator.main(Generator.java:44)
   :buildMetadata FAILED
   FAILURE: Build failed with an exception.
   What went wrong:
   Execution failed for task ':buildMetadata'.
   Process 'command 'C:\Java\jdk1.8.0_25\bin\java.exe'' finished with non-zero exit value 1

7. then, do the following:

   Run gradlew clean in the platforms > android folder.

8. Run tns run android again, it'll fix the issue and you'll see the FAB on your Angular 2 app!

[dlucidone]

uninstalling and installing again solved my problem. Thanks for the reply

[bradmartin]

I've not tried ng2 with NativeScript yet, holding out for end of beta 😄 However, I'm pretty sure you can use this with ng2, I think some people have been doing so from the conversations on the community slack channel. You might want to drop in there and ask around to see.

[bradmartin]

@Headcult you figured it out correct? If so, go ahead and close this and list the solution for future users. Thanks.

[pep108]

If anyone's having a hard time getting the tap to register in the angular 2 component, just change
tap="fabTap" to (tap)="fabTap()"

[dlucidone]

Hey, Im getting some sort of android error. I have tried gradle clean and replacing android platform too.
Any Help! Thanks!

Error: Error in pages/list/list.html:47:2 caused by: Could not load view for: FAB.Error: com.tns.NativeScriptException: Failed to find module: "nativescript-floatingactionbutton", relative to: app/tns_modules/ JS: com.tns.Module.resolvePathHelper(Module.java:159) JS: com.tns.Module.resolvePath(Module.java:60) JS: com.tns.Runtime.callJSMethodNative(Native Method) JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1022) JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:907) JS: com.tns.Runtime.callJSMethod(Runtime.java:895) JS: com.tns.Runtime.callJSMethod(Runtime.java:879) JS: com.tns.Runtime.callJSMethod(Runtime.java:871) JS: com.tns.gen.android.view.View_OnTouchListener.onTouch(android.view.View$OnTouchListener.java) JS: android.view.View.dispatchTouchEvent(View.java:9290) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2553) JS: android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) JS: com.android.internal.policy.PhoneWindow$DecorView.superDispatchTouchEvent(PhoneWindow.java:2403) JS: com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1737) JS: android.app.Activity.dispatchTouchEvent(Activity.java:2765) JS: com.android.internal.policy.PhoneWindow$DecorView.dispatchTouchEvent(PhoneWindow.java:2364) JS: android.view.View.dispatchPointerEvent(View.java:9514) JS: android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:4230) JS: android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:4096) JS: android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3642) JS: android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3695) JS: android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3661) JS: android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:3787) JS: android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3669) JS: android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:3844) JS: android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3642) JS: android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:3695) JS: android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:3661) JS: android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:3669) JS: android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:3642) JS: android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:5922) JS: android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:5896) JS: android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:5857) JS: android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:6025) JS: android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:185) JS: android.os.MessageQueue.nativePollOnce(Native Method) JS: JS: android.os.MessageQueue.next(MessageQueue.java:323) JS: android.os.Looper.loop(Looper.java:135) JS: android.app.ActivityThread.main(ActivityThread.java:5417) JS: java.lang.reflect.Method.invoke(Native Method) JS: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) JS: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

[bradmartin]

Could you please post the error, package.json, and relevant code files? Thanks

…

On Wed, Dec 21, 2016, 5:36 AM Ravi ***@***.***> wrote: Hey, Im getting some sort of android error. I have tried gradle clean and replacing android platform too. Any Help! Thanks! — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#21 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhCN9szexZBF-7vz2BxNeyHs1kV9dks5rKQ9QgaJpZM4IJH_J> .

[chuckmitchell]

Do I add the Element registration code to main.ts, before the following line?

platformNativeScriptDynamic().bootstrapModule(AppModule);

This is the code I'm talking about:

import {registerElement} from "nativescript-angular/element-registry";
registerElement("FAB", () => require("nativescript-floatingactionbutton").Fab);`

I'm getting an error when loading the page stating

Cannot read property "FloatingActionButton" of undefined, undefined.

HTML:
https://paste.ofcode.org/UMwk44gTkCtwbR9KfC2dh8

TS:
https://paste.ofcode.org/uFTEYn6wV65LgPG9ZtbKju