How To Use Pull To Refresh In NativeScript Angular 2 App

In this tutorial, I will show you how you can use pull-to-refresh in a NativeScript app using Angular 2. We will start off by creating a new app using the NativeScript CLI. I will remove all the code that ships with the starter app just so we have a clean slate to begin with.

Step 1)

Let’s start off by creating a new app using the CLI. Open the terminal/command prompt and run the following command

Notice that I am using the --ng flag, this will create a new NativeScript app with Angular 2.

Step 2)

Now it’s time to add Android and iOS platforms to our app. We do that by running the following commands.

A thing to note here is that you can only add iOS platform if you are using a MAC.


Step 3)

It’s now time to add NativeScript-PullToRefresh plugin. We do that by running the following command.

As we are using Angular 2, we will need to do things a bit differently than what is mentioned in the docs of the plugin.

To get autocompletion we will add a reference path in references.d.ts as follows. The references.d.ts file is at the root of our project


Step 4)

To code up our view, open up app\app.component.html and code it as follows.

In our view, we are creating a list. The list is wrapped in<PullToRefresh> tags. We also have refreshMe($event) function that will be called on the refresh event of the <PullToRefresh> tag.

The rest of the code is a simple list and pretty basic.


Step 5)

Moving on, we will now code the TypeScript code of our component. So open up app\app.component.ts and code it as follows.

We are not doing a lot in the above code but still, let’s understand it piece by piece.

First, we are importing necessary modules

Here we are using registerElement. This is necessary as we are introducing a new tag <PullToRefresh> which we used in our view.

We are registering out tag as follows

Note here that the string value “PullToRefresh” is the name with which our tag will be registered. You can name it whatever you want but, it’s best to give it a semantic name.

Moving on to our constructor we are just populating the list as follows

Finally, we have the refreshMe() function,

Here we are receiving the $event as a parameter. To simulate delay I have used setTimeout(). To hide the refresh spinner we are setting args.object.refreshing to false. Because we have imported PullToRefresh module we can typecast the event to get autocomplete and we do that by doing (<PullToRefresh>args.object).

As an example I am just pushing a new item to the array by doing this.myItems.push(2) you can run any code that you want here that will update your list. This is a common place to get new data from the server. But make sure that you are ending the refresh process by setting args.object.refreshing = false;.


Step 6)

We can now run our app my using livesync as follows

or you can run you app without livesync by using the following commands



Adding Pull To Refresh to a NativeScrip app with plain JavaScript is a pretty easy process as you can see in the plugin docs. But, to add it to a NativeScript app with Angular 2 has an extra step of registering the tag. In a few demo apps that I have used Pull To Refresh in, it has not worked if there is not ListView inside it. But then again Pull To Refresh is expected to be used with lists.


Download Code:

Code Will Be Sent Via Email


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)