Simple JSON Feed Reader With NativeScript and Angular 2

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post, I will show you how we can get started with NativeScript along with Angular 2. The purpose of this post is to make you familiar with using Angular 2 along with NativeScript. We will be creating a simple JSON feed reader that will get a list of data from a JSON API, upon clicking any of the items in the list we will make another call to the API to get more data about that item. We see how to define routes, navigate between routes, get data from a remote API and other things along the way as well, we will do all of that using Angular 2 with NativeScript.

Step 1)

Let’s start off by creating a fresh NativeScript project with Angular 2, we do that by running the following command in the terminal.

Note here that we are adding the --ng option. This will create a NativeScript project with Angular2. If you omit the --ng option you will get a NativeScript project with vanilla JavaScript.

 

Step 2)

Now it’s time to add the platforms that you wish to build for. Note that you cannot add iOS as a platform on windows. You will need a MAC to add and build for iOS. But for Android, you can add it irrespective of the operating system. Run the following commands in the terminal inside the project folder that was created in the previous step.

 

Step 3)

Now it’s time to take a look at the folder structure of our project and create a few files. We will be working inside the app folder, you will have the following files.

let’s now create two folders named pages and services. Inside the services folder create feedService.ts file. Inside the pages folder create two more folders named details and list. Inside the list folder create two files namely list.component.html and list.component.ts. Similarly, inside the details folder create details.component.html and details.component.ts.

We will also create app.module.ts and app.routing.ts inside the app folder.

So, you will have the following folder structure

Step 4)

In this step, we will code the feedService.ts file. We will be making http calls to jsonplaceholder.typicode.com API . We will code it as follows

Here we have two functions, the getList() function will get a list of users with info such as id, name, lastname ,etc  and the getDetails function will get the posts based on the user id of the user that we provide at the end of the URL. For more on what data is returned and the data structure please reffer to the API documentation.

 

Step 5)

Lets’ code the list component first.So open up list.component.ts and place the following code in it.

Here in the constructor() function we are injecting the feedService. The feedService has a method called getLlist() that returns an observable by making http call to our JSON API. We are subscribing to this observable using the .susbscribe() method, Inside which we are getting the list in the data variable from which we are extracting _body and populating the myItems variable.

 

Here the onItemTap() function will get the item index that was tapped on. We are then extracting the value of items from myItems array on line 27 based on the tapped index. Then the tapped item’s id (which we get from the API) is passed to getUserDetails() which navigates to the details page passing the selected.id as navigation parameter.

On line 20 we are setting isLoading to false which will use to hide ActivityIndicator in our view.

Let’s code up the list component. We will code the list.component.html file as follows.

Here we are displaying a list with <ListView> tag. All the list items are stored as an array in the myItems variable that we will populate in the TypeScript file. Here I am using an <ActivityIndicator> tag to show up when the items are being loaded and once the items are loaded we will hide it by setting the value of isLoading as false.

We also are using a template variable named item that is then to get the values of each individual item.

Contd….

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

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. :-)

%d bloggers like this: