Ionic-framework: Can't place InfiniteScroll inside custom component

[djangojack]

I would like to create a custom component and place infinite scroll inside of it.

So instead of this:

<ion-content>

 <ion-list>
   <ion-item *ngFor="#i of items"></ion-item>
 </ion-list>

 <ion-infinite-scroll (infinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

I would like to create a custom component and do this:

<ion-content>
  <my-list></my-list>
</ion-content>

This doesnt work. Instead I get this error message:
browser_adapter.ts:73 ORIGINAL EXCEPTION: No provider for Content! (InfiniteScroll -> Content)

Maybe InfiniteScroll needs to be able to look for ion-content in its parent/ancestor components?

Which Ionic Version? 2.x

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.5.0
Xcode version: Xcode 7.3 Build version 7D175

[Nodonisko]

Same problem is with _PullToRefresh_ component.

[joshgarwood]

I'm also having this issue. Any possibility of a fix making it into milestone Beta 11 or Beta 12, @brandyscarney ?

Thanks!!

[itaydemri]

Same problem with Beta 11. any fix in Beta 12?

[wundo]

Samething here

Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v5.6.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[alexmgrant]

amen to this.

[wo2888]

I need you help to resolve this problem

[marcioluis]

You must add the 'Content' to the viewProviders.
It breaks the css margin of the root ion-content but works...

`
import { Content } from 'ionic-angular';

@Component({
selector: 'new-list',
templateUrl: 'list.html',
viewProviders: [Content]
})
export class MyNewComponent{}`

[scferg]

I was able to get around the ORIGINAL EXCEPTION: No provider for Content! error by doing @marcioluis's sugestion. However, now I get the following error:

EXCEPTION: Error in ./PhotoListComponent class PhotoListComponent - inline template:17:0 caused by: Cannot read property 'removeEventListener' of undefined

If I remove <ion-infinite-scroll> from the template (line 17), the error goes away. It seems this might be related to #5760, but it was supposedly fixed and closed.

Any ideas?

ionic info
Cordova CLI: 6.0.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.46
ios-deploy version: 1.9.0
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v4.2.6
Xcode version: Xcode 8.1 Build version 8B62

[mebibou]

Same issue here and solution not working, any solution from ionic team? :)

@scferg I don't think it is related as the issue is about leaving the page, and the content was already found and bound to events, this looks like it cannot find the ion-content element.

[scferg]

@mebibou I agree, it's not that issue, but it's the only issue I could find that seemed to have _any_ relevance with this error. I'm surprised more people haven't brought this up...

A response from the team would be great. I can't ship my app without this being supported (or without finding a crazy workaround) since my custom list component has complex logic that I don't want to duplicate for every page it needs to appear on.

I've started trying to see if I can leave ion-infinite-scroll out of the custom component and include it on the page itself, but I'm having a hard time connecting the two logistically.

[skoubin]

Have you tried to wrap your custom component with an extra ion-content element?

I faced the same problem and this is how I got rid of the error "ORIGINAL EXCEPTION: No provider for Content! (InfiniteScroll -> Content)"

My custom component looks like

<ion-content>
    <ion-list>
    .......
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="loadMore($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles"
                           loadingText="Loading more..."></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

and the page, that uses it, looks like

<ion-header>....</ion-header>
<ion-content>
    <custom-component></custom-component>
</ion-content>

I am not sure whether this extra ion-content has any other implications but it looks fine so far!

[scferg]

@skoubin I have tried that haha. At first it looked fine, but then it seemed to be causing jagged page transitions, but now that I've tried this approach again, it no longer seems to be the case. It must've been something I was doing wrong.

The only remaining issue with this approach is that <ion-content fullscreen> is messed up, which is what @marcioluis pointed out. It'll take some css hacks to restore it.

It's a hacky approach since <ion-content>, <div class="fixed-content">, and <div class="scroll-content"> are all unnecessarily duplicated, but it seems to be the best solution for now.

Edit: Buggy page transitions do still seem to be an issue with this approach. If the page with the custom component (and duplicate ion-contents) is the first in a stack and you navigate away from (or back to) it, everything is fine. It seems that when the page with the custom component is not the first in the stack (therefore, it's pushed in from another page), the transition is jumpy. See below.

[captaincole]

As of RC4 I am still seeing this issue and would also appreciate a decent resolution.

[JustasKuizinas]

Have same issue, infinitescroll doesnt work inside custom components

[AlQuraian]

I managed to avoid the issue by moving ion-infinite-scroll out of the component and into the page (The ion-content is only in the page). Then delegating the 'ionInfinite' event as such:
<ion-content>
<list #list></list>
<ion-infinite-scroll (ionInfinite)="list.doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

It seems to be working fine for me.

[captaincole]

@AlQuraian It seems that this solution does not work for me. I added this and created a custome component with an event doInfinite, but the search breaks when I call it.

Where

  <workout-search #workouts></workout-search>
    <ion-infinite-scroll *ngIf="moreData" (ionInfinite)="workouts.doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

And in workout-search.comp

  doInfinite($event) {
    console.log('Infinite Event');
  }

Error in ./DiscoverPage class DiscoverPage - caused by: self.parentView.context.workouts.doInfinite is not a function

[MankinPT]

@AlQuraian @thielCole AlQurain solution works, but is not elegant or very practical reproducing the doInfinite logic every time you want to use the component (it's against what a component is suppose to represent).

[captaincole]

@MankinPT To get around this, I was using a rxjs Behavior Subject to observe data changes accross components. I did manage to refactor my specific issue to get rid of this dependency but it would still be nice to have.

[AmitMY]

Any update on this?

[alexmgrant]

@patrickmcd I think you're the very first GitHub troll, congrats.

[captaincole]

Ya!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.