Angular 2 integration

[DroneKid]

Hi! Thanks for developing this. I'm trying to integrate it with NS Angular 2. Does anyone have any tips on how to better achieve that?
As a side note, demo app does not run for me on android (complains about ./helpers).

[alexrainman]

I don't use Angular myself but it should be exactly the same thing as it's right now. The plugin behaves like any other {N} widget.

About .helpers, it seems my .gitignore "ignore" that file. You can create the file using this tutorial:

https://www.nativescript.org/blog/use-async-await-with-typescript-in-nativescript-today

You can also find it in tns-modules/nativescript-carousel-view folder. Move it to app folder.

[DroneKid]

Thanks a lot. I'm closing it as I figured how to use it for ng2. One needs to make elements visible to angular bootstrap/templates. For example, for CardView wrapper.

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

[alexrainman]

Cool, will include this in the documentation.

[alexrainman]

Where do you put this code?

[DroneKid]

This has to be before angular boot strap as far as I know. So main.ts is a good place, before you call platformNativeScriptDynamic().bootstrapModule(...)

[alexrainman]

Thanks

Hi,
have you figured out how to use an Angular2 template for the ITemplateSelector?

Its return type is the Nativescript Core View in ui/core/view. But in NG there is no such type...
So is there a way to convert my angular template/view into a ns core view, so it can be used with Carousel?

[alexrainman]

If you can use builder from Angular then you can return ui/core/view.

[DroneKid]

You can certainly use builder, but the real problem here is to use angular component as template. For this you have to dynamically bootstrap the component and convert it to /ui/core/view.

I did not invest much time into this, but I assume that if you bootstrap/compile a component proper angular way, it will return a view because compiler uses {N} renderer. But again, you cannot assume anything with ng2 these days. Dynamic component loading would be the way to try make this work.

[alexrainman]

Found this thread but example link is dead NativeScript/NativeScript#3084

@Bronzovik this is my understanding,too. I had a look at angular dynamic component construction.

Basically you can create and display the angular view from a template with createEmbeddedView methode - see ViewContainerRef.
A very good link on integrating third party plugins from the angular side is in the Nativescript Docs .
With this peace of code you should get the /ui/core/view from the angular template:

const viewRef = this.viewContainer.createEmbeddedView(this.template);
        //filter out whitespace nodes
        const titleViews = viewRef.rootNodes.filter((node) =>
                            node && node.nodeName !== '#text')

        if (titleViews.length > 0) {
            const titleView = titleViews[0];
        }

But to my mind there is a problem:
If i understand CarouselView code correctly (can only speak of Android), a view is added directly via a native android method. That sounds like the view would be registered / displayed twice - once in Angular via createEmbeddedView, once directly via Android. Just haven't tried that...

[alexrainman]

@Bronzovik @FLEXXIS yes, the view is added to CarouselView via native methods. I don't use Angular so, i am sorry i cannot provide too much support.