Nativescript-angular: Support 3rd-party UI components

[tjvantoll]

If you want to use a 3rd-party UI component in {N} today you must bring it in via an xmlns attribute on the <Page>. In {N} + ng2 that’s not possible, so I’m not exactly sure how we can handle this.

At the moment, for me the big limitation is that I can’t use UI for {N}, which is really important for demos and such.

[matt4446]

@tjvantoll having already played about with this...

Some good documentation on the variants (simple / complex) would definitely be good. Or some Telerik component examples when they do their integration.

The card view was easy to add. Telerik drawer more challenging (I don't think Nathan Walker got it working fully in the end, and he got further than myself).

Brad martin's CardView: https://github.com/bradmartin/nativescript-cardview

Angular component:
CardView

That leaves the element to be defined. As you mentioned it is traditionally in the app namespace, but that isn't necessary. CardView still needs a needs a resolver though as it's not quite magic:

registerElement("CardView", require("nativescript-cardview").CardView)
The element name could be named anything if you had a few conflicting names.

I currently define it at app startup, but it might be best in the component code. I'm undecided,
which runs in a decorator here

Example of the card view bring used:
https://github.com/matt4446/WhatsMyScore2-NativeScript/blob/master/app/pages/regionsPage/regionsPage.html

[tjvantoll]

Thanks @matt4446. And interesting. It’s unfortunate that we’d need to wrap all of these 3rd-party controls with Angular components. It would be ideal if you could build a component that could be used with and without Angular, but maybe that’s not feasible without things getting really ugly. I’ll have to do some playing with your examples.

[matt4446]

@tjvantoll It would be interesting to see what you create. The easiest way would be to add angular2 + angular-nativescript as a dependency (but most people probably wouldn't want the chain of dependencies). One could possibly get away with a typing file for angular2 and nativescript-angular (I imagine). Then the 3rd party module only needs one extra typescript file that describes the component and element registry.

The related providers / directives from the 3rd party could then be added to the normal project using import or require?

[hdeshev]

The basic support is already there (registerElement, etc). It needs to be documented, of course.

Wrapper components/directives will be required for advanced components that have templates or expose View properties that need to be set from template markup. We plan to document both scenarios and, if possible, expose a service that makes exposing and loading templates easier.

[valentinstoychev]

Lets try to enable at least the SideDrawer from UI for NativeScript as it is a very core component.

[hdeshev]

@valentinstoychev I'm pretty happy with my latest SideDrawer experiment, and the path to productizing it should be straightforward.

<RadSideDrawer #drawer>
    <template drawerSide>
        <Label text="SIDE CONTENT"
            style="background-color: hotpink; color: white; font-weight: bold">
        </Label>
    </template>
    <Label *drawerMain text="MAIN CONTENT!"></Label>
</RadSideDrawer>

[anhoev]

@hdeshev : do you have any plan with RadListView ?

[hdeshev]

@anhoev, we do. @ginev and the Telerik UI for NativeScript team are working on a wrapper, but I don't have any timeline details yet.

[ginev]

@anhoev this is our first priority after NS UI's official release at the end of March.

[anhoev]

@hdeshev @ginev super !!!