I'm trying to add a refresher

Ionic Framework ionic-v3
1

Hi guys,

I’m trying to add a refresher in my app (from ionic creator in an HTML template page), but I had an issue… I’m followig this documentation exemple :

But I don’t know where I have to write this part :

> @Component({…})
> export class NewsFeedPage {

> doRefresh(refresher) {
> console.log(‘Begin async operation’, refresher);

> setTimeout(() => {
> console.log(‘Async operation has ended’);
> refresher.complete();
> }, 2000);
> }

> }

Already wrote this in my HTML page :

> <ion-refresher (ionRefresh)=“doRefresh($event)”>
> <ion-refresher-content
> pullingIcon=“arrow-dropdown”
> pullingText=“Pull to refresh”
> refreshingSpinner=“circles”
> refreshingText=“Refreshing…”>
>
>

Is someone can tell me in wich file I have to write the export class declaration ? :slight_smile: Should I write it in a JS file (directive, service…?), I’m confused !

2

Hey, so I’m guessing you are new to Ionic – welcome for the ride :wink:

So the @component bit goes into your .ts/.js file

The .ts/.js file deals with the programmatic aspects, while your ion/content stuff goes into html files (the presentation layer)

Good luck!

3

Hi, yes I’m a newbie… ^^’ Thanks for your quick answer !

Mmh… So I tried to write the code below in “directive.js” (doesn’t work), then in “service.js” (doesn’t work too), should I create a specific file for this ?

export class NewsFeedPage {

doRefresh(refresher) {
console.log(‘Begin async operation’, refresher);

setTimeout(() => {
  console.log('Async operation has ended');
  refresher.complete();
}, 2000);

}

}

4

Is someone can help me ? I know it’s ionic basics but, I still have this issue… :confused:

Thanks a lot :slight_smile:

5

hi @Memphis27,
well i feel you need to learn basics of angular 2
follow the link and try to complete the tour of heros, then try the ionic 2

6

Thanks for that link, it was really helpful. :slight_smile: But, my question wasn’t enough clear I guess, my problem is that I fully work with ionic creator, and in that workspace I would like to know how to manage new classes, component…etc.

Because in ionic creator, when you start a new project you already have a sort of organisation in code section :

  • pages
  • other JS files (“directive.js” and “service.js”)
  • HTML templates

But nowhere there is a specific field for “.ts” files…So I’m still a bit confused between the things ionic framework can handled and ionic creator can.

7

actually .ts files mean typescript files, which is a super set od javascript,
in a plain words it is an advancement of js files
for further please read this thread

if you create a project for ionic 2 you are able to see the ts files
go through this basics of ionic2