Ion-refresher inside custom component insider a segment

Ionic Framework ionic-v3
1

I need to put a ion refresher inside a custom component that is inside a segment.

My main page is like the example bellow:

<ion-header>
	<div padding>
		<ion-segment [(ngModel)]="segment">
			<ion-segment-button value="custom">
				Custom
			</ion-segment-button>
			<ion-segment-button value="news">
				News
 			</ion-segment-button>
		</ion-segment>
	</div>
</ion-header>
<ion-content padding>
	<div [ngSwitch]="segment">
		<custom-component *ngSwitchCase="'custom'"></custom-component>
	</div>
</ion-content>

And inside ‘custom-component’ I have:

<ion-refresher (ionRefresh)="doRefresh($event)">
	<ion-refresher-content></ion-refresher-content>
</ion-refresher>    
<ion-list>
(..)
</ion-list>
<ion-infinite-scroll (ionInfinite)="loadMore($event)">
	<ion-infinite-scroll-content loadingSpinner="bubbles">
	</ion-infinite-scroll-content>
</ion-infinite-scroll>

The result is an error:

polyfills.js:3 Unhandled Promise rejection: Template parse errors:
No provider for Content ("

[ERROR ->]<ion-refresher (ionRefresh)=“doRefresh($event)”>

  <ion-refresher-content></ion-refresher-content>

“): CustomComponentComponent@2:1 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
No provider for Content (”

However, if I put a new ion-content inside a segment, there is no error, but the screen doesn’t show.

The documentation says that Ion refresher need to be a first child form a ion-content. But how can I achieve this use case?

2

please just add <ion-content> tags around your custom template.

2 Likes
3

But that adds a blank page on top of the page in which the component is used

4

If you don’t get any better answers, two things you can try: swap <ng-template> for the <div> and replace ngSwitch with a series of ngIfs.

5

Hi there. You can use it in your main page like this:

<ion-header>
	<div padding>
		<ion-segment [(ngModel)]="segment">
			<ion-segment-button value="custom">
				Custom
			</ion-segment-button>
			<ion-segment-button value="news">
				News
 			</ion-segment-button>
		</ion-segment>
	</div>
</ion-header>
<ion-content padding>
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>  
	<div [ngSwitch]="segment">
		<custom-component *ngSwitchCase="'custom'" (isRefreshing)="onRefreshEnded($event)"></custom-component>
	</div>
</ion-content>

then in your main page .ts file use a event to trigger the refresh method on your custom component
and callback event to finish the refresher.complete(). Don’t forget to import Events from 'ionic-angular';

import { IonicPage, NavController, NavParams, Events } from 'ionic-angular';

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public events: Events
  ) {}

  public refresher;
  public isRefreshing: boolean = false;

    doRefresh(refresher) {
        this.refresher = refresher;
        this.isRefreshing = true;
        this.events.publish('custom-component-action-onrefresh');
    }

    onRefreshEnded(isRefreshing: boolean) {
        this.isRefreshing = isRefreshing;
        if (this.refresher != null) {
            this.refresher.complete();
        }
    }

in your custom component .ts file set a output variable.
Also, don’t forget to import Events from ionic-angular and EventEmitter from @angular/core;

import { IonicPage, NavController, NavParams, Events } from 'ionic-angular';
import { Output, OnInit, EventEmitter } from '@angular/core';

export class MyCustomComponent  implements OnInit {
    @Output()
    isRefreshing: EventEmitter<boolean> = new EventEmitter<boolean>();

on your constructor method do the event subscribe.

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public events: Events
  ) {
    this.events.unsubscribe('custom-component-action-onrefresh');
    this.events.subscribe('custom-component-action-onrefresh', () => {
        this.myInitMethod(); //also called on my ngOnInit
    });
}


 ngOnInit() {
    this.myInitMethod();
  }

myInitMethod(){
    //  my data load statement
}

so, when you method “myInitMethod” finishes, you can warn your main page to
finish the refresher as completed.

myInitMethod(){
    // my data load statement 

    //put this code where you load method ends.
    if (this.isRefreshing) {
        this.isRefreshing.emit(false);
    }
}