Activity Indicator

The ActivityIndicator represents a UI widget which displays a progress indicator hinting the user for some background operation running like loading image, data, accepting a request, etc. You can control its behavior by setting or binding to its busy property.

Image

Setting Busy

You can work with its busy property and set it to true or false, thus displaying or hiding the control.

Setting an activity indicator’s busy property:

<Button row="0" text="Modify Busy property" (tap)="(activityIndicator.busy = !activityIndicator.busy)" class="btn btn-primary btn-active" ></Button>
<ActivityIndicator row="1" #activityIndicator busy="true" (busyChange)="onBusyChanged($event)" width="100" height="100" class="activity-indicator"></ActivityIndicator>

Improve this document

Demo Source


Setting Busy Http Request

Extended example, desmostrating how to use ActivityIndicator during HTTP request

Setting an activity indicator in the HTML:

<Button row="0" text="Modify Busy property" (tap)="(activityIndicator.busy = !activityIndicator.busy)" class="btn btn-primary btn-active" ></Button>
<ActivityIndicator row="1" #activityIndicator busy="true" (busyChange)="onBusyChanged($event)" width="100" height="100" class="activity-indicator"></ActivityIndicator>

Setting an activity indicator’s busy property value:

import { Component, AfterViewInit } from "@angular/core";
import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";

@Component({
    moduleId: module.id,
    templateUrl: "./setting-busy-http-request.component.html"
})
export class SettingBusyHttpRequestComponent implements AfterViewInit {
    public originatingIp = "";
    public status = "";
    public slept = "_";
    public response = "";
    public isBusy = true;
    private serverUrl = "http://www.fakeresponse.com/api/?sleep=5";

    constructor(private http: HttpClient) {}

    ngAfterViewInit() {
        let headers = this.createRequestHeader();
            this.http.get(this.serverUrl, { headers: headers })
            .subscribe(
                data => {
                    this.originatingIp = data["meta"]["originating_ip"];
                    this.status = data["status"];
                    this.slept = data["slept"];
                    this.response = data["response"];
                    this.isBusy = false;
                },
                err => {
                  console.log("Error occured.");
                  console.log(err);
                }
              );
    }

    private createRequestHeader() {
        // set headers here e.g.
        let headers = new HttpHeaders({
            "AuthKey": "my-key",
            "AuthToken": "my-token",
            "Content-Type": "application/json"
        });

        return headers;
    }
}

Improve this document

Demo Source


API Reference for ActivityIndicator Class

Native Component

Android iOS
android.widget.ProgressBar (indeterminate = true) UIActivityIndicatorView
Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.