NativeScript Angular2 Support

[9thwall]

Will this work with NativeScript + Angular2?
I'm trying to figure out how I would add xmlns:FAB="nativescript-floatingactionbutton" in a NativeScript Angular Page.

[bradmartin]

Yes it works. Almost all plugins work with angular native (NativeScript +
angular). You need to registerelement() there are some samples on other
plugins I've done. Check the drawing pad plugin repo for example of NS
angular example.

On Sun, Oct 2, 2016, 6:24 PM Leo9 notifications@github.com wrote:

Will this work with NativeScript + Angular2?
I'm trying to figure out how I would add
xmlns:FAB="nativescript-floatingactionbutton" in a NativeScript Angular
Page.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#32,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhI8suXBA6MdmF_9CQqfehsBk2KA9ks5qwD0vgaJpZM4KMJhu
.

[bradmartin]

If a plugin doesn't work with angular then it should explicitly say that
its for angular native. Also IMO that's a bad way to do a plugin for
NativeScript bc it excludes plain NativeScript users which are thousands.
At any rate all my plugins and the majority of community plugins work with
angular. So enjoy the hundreds of them :)

On Sun, Oct 2, 2016, 6:40 PM Brad Martin bradwaynemartin@gmail.com wrote:

Yes it works. Almost all plugins work with angular native (NativeScript +
angular). You need to registerelement() there are some samples on other
plugins I've done. Check the drawing pad plugin repo for example of NS
angular example.

On Sun, Oct 2, 2016, 6:24 PM Leo9 notifications@github.com wrote:

Will this work with NativeScript + Angular2?
I'm trying to figure out how I would add
xmlns:FAB="nativescript-floatingactionbutton" in a NativeScript Angular
Page.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#32,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhI8suXBA6MdmF_9CQqfehsBk2KA9ks5qwD0vgaJpZM4KMJhu
.

[9thwall]

Awesome! Thank you for the info. I'm gonna check it out now.

[9thwall]

Sorry to bug you again about this.. I'm having a hard time trying to get this to show.
I must be missing something simple...

I have my controller like this..

import { Component, OnInit} from "@angular/core";
import { registerElement} from "nativescript-angular/element-registry";
import { Page } from "ui/page";
import { RouterExtensions } from 'nativescript-angular/router';
import observable = require("data/observable");

registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);

@Component ({
    selector : "home",
    templateUrl: "./pages/home/home.html",
    styleUrls: ["./pages/home/home.css"],
})
export class HomeComponent implements OnInit {
    private router;
    constructor(page: Page, router: RouterExtensions) {
        page.actionBarHidden = false;
        this.router = router;
    }
    ngOnInit(){
        ......
    }
}

And then in my template I did this..

<ActionBar>
    <StackLayout horizontalAlignment="center" verticalAlignment="center">
        <Label text="Home"></Label>
    </StackLayout>
</ActionBar>

<RadSideDrawer #drawer>
    <StackLayout tkDrawerContent class="sideStackLayout">
        <StackLayout class="sideTitleStackLayout">
            <Label text="MY NAME"></Label>
        </StackLayout>
        <StackLayout class="sideStackLayout">
            <Label text="Home" class="sideLabel sideLightGrayLabel"></Label>
            <Label text="Another" class="sideLabel"></Label>
        </StackLayout>
    </StackLayout>

    <GridLayout tkMainContent rows="*" columns="*">

        <StackLayout id="games" row="1">
            .......
        </StackLayout>
        <FAB:fab #fab (tap)="fabTap()" row="1" icon="res://ic_add_white" rippleColor="#f1f1f1" class="fab-button"></FAB:fab>

    </GridLayout>
</RadSideDrawer>

I also made sure to copy over the icon to all the resolution folders and add the CSS.
What can I be missing?

[bradmartin]

Any errors? Screenshots?

On Sun, Oct 2, 2016, 7:58 PM Leo9 notifications@github.com wrote:

Sorry to bug you again about this.. I'm having a hard time trying to get
this to show.
I must be missing something simple...

I have my controller like this..

import { Component, OnInit} from "@angular/core";
import { registerElement} from "nativescript-angular/element-registry";
import { Page } from "ui/page";
import { RouterExtensions } from 'nativescript-angular/router';
import observable = require("data/observable");

registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);

@component ({
selector : "home",
templateUrl: "./pages/home/home.html",
styleUrls: ["./pages/home/home.css"],
})
export class HomeComponent implements OnInit {
private router;
constructor(page: Page, router: RouterExtensions) {
page.actionBarHidden = false;
this.router = router;
}
ngOnInit(){
......
}
}

And then in my template I did this..

<RadSideDrawer #drawer>

<GridLayout tkMainContent rows="*" columns="*">

    <StackLayout id="games" row="1">
        .......
    </StackLayout>
    <FAB:fab #fab (tap)="fabTap()" row="1" icon="res://ic_add_white" rippleColor="#f1f1f1" class="fab-button"></FAB:fab>

</GridLayout>

I also made sure to copy over the icon to all the resolution folders and
add the CSS.
What can I be missing?

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#32 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhJvq3fSFs82UMCi5Rqn30ZveqlMjks5qwFNQgaJpZM4KMJhu
.

[9thwall]

I'm not getting errors in the console or in the device.
Currently the page just has a title bar and no content as of now.

Is there any other set up I might of missed that may keep it from showing?

[9thwall]

I got it working! ;)
I had to change
<FAB:fab #fab (tap)="fabTap()" row="1" icon="res://ic_add_white" rippleColor="#f1f1f1" class="fab-button"></FAB:fab>
to
<FAB (tap)="fabTap()" row="0" icon="res://ic_add_white" rippleColor="#f1f1f1" class="fab-button"></FAB>