Show Hide ActivityIndicator In NativeScript Angular 2 App

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 tutorial, I will show you how you can show and hide Activity Indicator in a NativeScript Angular 2 app.  We will also take a look at how you can set the height and width of activity indicator as well as how you can set it’s color.

Step 1)

Let’s start off by creating a new app in NativeScript with Angular 2. Open up your terminal and run the following command.

Note that the--ng options allows us to create the project with Angular 2.

Step 2)

Now it’s time to navigate inside the project folder and add Android and iOS platform using the following command.

A thing to note here is that you will only be able to add iOS if you are on a MAC.

 

Step 3)

We will be making changes to the default app that NativeScript gives. So open up app.component.ts and code it as follows.

Here I have removed all the code that came along with the default app just to keep things simple. We have a function inTap() that toggles the value of isLoading. We will call this onTap() function from our view using a button.

 

Step 4)

Now let’s code the app.component.html, here as well I have removed the default code that came with the starter app.

Here we have a button that calls our onTap() function on the tap event. We have our ActivityIndicator on line 3. We have set it’s height, width and color by using their respective attributes. Also, have an attribute [busy], which will show or hide the activityIndicator. But hiding activityIndicator by setting  [busy]=false will only hide it, but the space taken up by the activityIndicator will still show up as empty space. To completely remove it we can set the [visibility] attribute.

We have set values of both [busy] and [visibility] using isLoading variable.

 

Step 5)

Now all that is left is to run our app. You can do that by issuing the following command in the terminal depending on your platform.

 

Conclusion

ActivityIndicator is a great way to notify the user of some ongoing process. Just hiding the ActivityIndicator in NativeScript still leaves an empty space where the activiyIndicator was shown as a result you will need to use the visibility attribute to remove it. ActivityIndicator is something that is expected in modern day applications as should be used where every necessary.

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