ios: pulltorefresh with angular component causes Error

[razorsyntax]

The following is pseudo-code of what the angular 5 looks like.

Pull to refresh currently works with this setup in android but not ios.

The following error occurs:

JavaScript error: file:///app/bundle.js:1:822578: JS ERROR Error: Content must inherit from either UIScrollView, UIWebView or WKWebView!

The top component has the following code:

<PullToRefresh (refresh)="refreshList($event)" class="refresh-pull">
        <app-component-with-list></app-component-with-list>
</PullToRefresh>

Inside of app-component-with-list:

<ListView [items]="stuffItems">
        <ng-template *ngIf="condition">
                <StackLayout>
                     (Stuff for the list)
                </StackLayout>
        </ng-template>
</ListView>

[bradmartin]

See if the demo setup helps, it works on both platforms. I know people use it in angular apps and Vue without issue, but sometimes the iOS layout needs a small tweak because of the native APIs being used. Which I ran into this myself because Android works with just about anything you throw at it, not so much for iOS 😄 let me know if the demo helps.

[razorsyntax]

Well cool. It definitely works. I was able to run the demo and it works in iOS. Which is great.

In my project, however, if I pull out the reusable ListView from the child component (app-component-with-list), PullToRefresh definitely works... but then I lose the reusability of the component which makes it, well, less Angular. :)

This works in iOS:

<PullToRefresh (refresh)="refreshList($event)" class="refresh-pull">
        <ListView [items]="stuffItems">
                <ng-template *ngIf="condition">
                        <StackLayout>
                            (Stuff for the list)
                        </StackLayout>
                </ng-template>
        </ListView>
</PullToRefresh>

This does not:

<PullToRefresh (refresh)="refreshList($event)" class="refresh-pull">
        <app-component-with-list></app-component-with-list>
</PullToRefresh>

I don't think it makes a difference here but I'm using Angular 5 (html instead of xml, etc). I'll keep playing with this. If I find a solution I'll post it here.