Nativescript Angular 2 disable background tap events

Question

I have a login button which when clicked will log the user in by making http calls to the server.

While this is happening I want the activity indicator to show up and disable the button and every other thing on the page and just show the activity indicator over it.

Note that I will place time outs and other measures to make sure that the Activity indicator doesn't end up trapping the user.

Also, I do not want the content in the background to disappear. I just want the activity indicator to overlap it.

Here is my ui code which was taken for this SO answer https://stackoverflow.com/a/39124735/4412482

<GridLayout>
    <StackLayout>
  //page content goes here
</StackLayout>
    </StackLayout>
    <StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"></StackLayout>
    <GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
       <ActivityIndicator busy="true" width="50" height="50"  color="#0c60ee"></ActivityIndicator>
    </GridLayout>
</GridLayout>

Answer 1

To disable the events to the components you could use isUserInteractionEnabled property, which will disable the whole interaction to the component and then you could show the ActivityIndicator. I am providing sample code below.

app.component.html

<GridLayout rows="*">
    <StackLayout row="0" class="p-20">
        <Label text="Tap the button" class="h1 text-center"></Label>
        <Button text="TAP" (tap)="onTap()" class="btn btn-primary btn-active" [isUserInteractionEnabled]="buttoninteraction" ></Button>
        <Label [text]="message" class="h2 text-center" textWrap="true"></Label>
    </StackLayout>
    <ActivityIndicator row="0" [busy]="acstate" row="1" class="activity-indicator"></ActivityIndicator>
</GridLayout>

app.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public counter: number = 16;
    public buttoninteraction = true;
    public acstate = false;

    public get message(): string {
        if (this.counter > 0) {
            return this.counter + " taps left";
        } else {
            return "Hoorraaay! \nYou are ready to start building!";
        }
    }

    public onTap() {
        this.counter--;
        this.buttoninteraction=false;
        this.acstate=true;

    }
}

Hope this helps.