Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic construction of the pager content #12

Closed
arnauvp opened this issue Feb 21, 2017 · 4 comments
Closed

Dynamic construction of the pager content #12

arnauvp opened this issue Feb 21, 2017 · 4 comments

Comments

@arnauvp
Copy link

arnauvp commented Feb 21, 2017

Thanks for the good work so far! This plugin is exactly what I need for a new app we're building.
I have been playing with the plugin for a couple of days but I can't manage to add the content dynamically with angular. Trying to use *ngFor results in an exception like:

JS:     com.tns.gen.android.support.v4.view.PagerAdapter_frnal_ts_helpers_l58_c38__PagerAdapter.instantiateItem(android.support.v4.view.PagerAdapter.java)
JS:     android.support.v4.view.ViewPager.addNewItem(ViewPager.java:1034)
...
JS: Caused by: java.lang.IllegalArgumentException: Cannot add a null child view to a ViewGroup
JS:     android.view.ViewGroup.addView(ViewGroup.java:4189)
JS:     android.view.ViewGroup.addView(ViewGroup.java:4171)

I also tried creating the Nativescript views with code and pushing them to the items array:
this.pager.nativeElement.items.push(someStackLayoutWithChildren);

In the end the problem seems to be the _nativeView property being undefined in instantiateItem.
Could you guys provide some guidance on how this could be achieved? I'm using the android emulator.

Thanks in advance!

triniwiz added a commit that referenced this issue Feb 21, 2017
@triniwiz
Copy link
Owner

@arnauvp you can upgrade to 2.3.0 that should fix your problem

@arnauvp
Copy link
Author

arnauvp commented Feb 21, 2017

So fast!!! That allows me to programmatically inject Nativescript components in the slider, big win! I am still trying to figure out how to render full angular components in there, since *ngFor still complains (I guess since nodes don't map to a real Android View). I'll retry a few of the things I had previously attempted with ComponentFactoryResolver and Renderer. I'll keep you posted!

@arnauvp arnauvp closed this as completed Feb 21, 2017
@arnauvp
Copy link
Author

arnauvp commented Feb 22, 2017

This image summarizes how I got it working. There's probably a better way...
[slide-page] is just a directive to get hold of the placeholder stacklayout using ViewContainerRef and @ViewChild (should be called something else now that I only need one of these in the page).
Then I create a component in the placeholder, remove it with ViewUtil and add it to the slidder after wrapping it with a new StackLayout.

slider_placeholder_working

@hauthorn
Copy link

@arnauvp Do you have a full code example? I could use some inspiration and guidance to achieve the same in my project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants