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

Step 6)

It’s now time to code the details.component.ts file. Here we will receive the id passed during navigation and issue a new API call that will get more data on that perticular id. We will code it as follows.

We are extracting the passed data using the ActiveRoute module. After getting the passed data we are using the feedService to make another call to the API and get the relevant user info.  We have onNavBtnTap() function which will be invoked when the user taps the back arrow on the top right of the screen. This will take the user to the previous view which is the list.component.

 

It’s now time to display data, so open up details.component.html and code it as follows.

 

Step 7)

Now it’s time to set up routes for our app. Will do that in the app.routing.ts file that we created previously. We will add routes to out list component and details component as follows

We are exporting a constant navigatableComponents that we will have all the components that we used in the routes. We are doing so beacuse we it will make it easy for us to import it in the module.

Step 8)

We will modify the main.ts file and remove all the code related to ngModule. So you will have the following code in main.ts

We have remove ngModule because we will be coding it in app.module.ts.

Now open up app.module.ts and put the following code in it.

As you can see we are injecting feedService as a provider and we are also setting up NativeScriptRouterModule to use the routes that we set up in app.routing.ts

Conclusion

We did a lot of things in this tutorial. We started off by creating to components and a service. We saw how to make http calls to an API. We also saw how you can navigate between pages and pass parameters. We also set up routes.

Creating a NativeScript App with angular 2 makes our live easier when it comes to creating modules and navigating between them.

 

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 @pointDeveloper

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