CODEWITHSUNDEEP
nativescriptangular2-nativescript
Johannes Kraft
Johannes Kraft

Reputation: 257

ActivityIndicator won't turn off after control property is set to false

Im using Anuglar6 and Nativescript trying to make the ActivityIndicator show when i do api work (login). That works fine but but after i set the Boolean processing to false it stills shows the spinning animation. 

<StackLayout class="container">
  <StackLayout class="form">
    <Label class="h3 lbl" text="Användarnamn:" textWrap="true"></Label>
    <TextField class="field input input-border" [isEnabled]="!processing" keyboardType="email" autocapitalizationType="none" (textChange)="setUsername($event)" (returnPress)="focusPassword()"></TextField>
    <Label class="h3 lbl" text="Lösenord:" textWrap="true"></Label>
    <TextField #password class="field input input-border" [isEnabled]="!processing" secure="true" autocapitalizationType="none" (textChange)="setPassword($event)"></TextField>
    <Button class="loginBtn" text="LOGGA IN" [isEnabled]="!processing" (tap)="submit()"></Button>
    <ActivityIndicator row="1" [busy]="processing" width="100" height="100" class="activity-indicator"></ActivityIndicator>
  </StackLayout>
</StackLayout>

    private processing = false;

    public login(): void {
    this.processing = true;
    this.authService.login(this.username, this.password)
        .subscribe(
            () => {
                console.log(this.processing);
                this.processing = false;
                console.log(this.processing);
                // this.router.navigate(['home']);
            });
}

The console.log printout

JS: true
JS: false

What am i doing wrong here?

Upvotes: 1

Views: 134

Answers (1)

Johannes Kraft
Johannes Kraft

Reputation: 257

Thanks a lot for all your help in the matter. I did not want to have to click the button one more time to close the ActivityIndicator. I wanted it to turn off after login task was finished. The data was updated but the ui was not. I solved it with a BehaviorSubject.

public processing$ = new BehaviorSubject<boolean>(false);

public login(): void {
    this.processing$.next(true);
    this.authService.login(this.username, this.password)
        .subscribe(
            () => {
                console.log(this.processing$);
                this.processing$.next(false);
                console.log(this.processing$);
                this.router.navigate(['home']);
            });
}

Now it updates the ui accordingly.

Upvotes: 1

Related Questions