CODEWITHSUNDEEP
angulartypescript
user2617470
user2617470

Reputation: 341

Angular 2: How to do something in a while loop every 5 seconds after EVERYTHING else is finished in angular 2?

So I gotta do something (actually sign-in into a 3rd party) after everything else is done (because I need to wait for another token /4th party token/ before I proceed) for every 5 second until I got a success from that authentication and then I will cut it off. Here is my code inside of the component which needs a authentication from a 3rd party.

    //Some other component stuff....

    ngAfterViewInit(): void {
           while (!this.isAuthenticated) {
                for (this.loginCountDown; /*which is 5*/
                     this.loginCountDown > 0; 
                     this.loginCountDown--;) {
                    setTimeout(() => {
                    /*simple waiting*/
                    }, 1000);
                }
                this.loginStatusMessage = 'trying to login...';
                this.Attempt_Login_And_Update_IsAuthenticated_Value();
            }
     }

but doing this will just make the website stuck inside of this loop without even showing anything. So I must did something wrong here.

How do I correctly do it? My desired outcome is the rest of the website just works as normal while I just have a small div showing:

"attempt to log in... [count down from 5]"

once success showing something else.

How?

Upvotes: 0

Views: 1682

Answers (1)

Saravana
Saravana

Reputation: 40604

You can use Observables to define intervals:

Observable
    .interval(5000)
    .startWith(0) // start the first loop immediately
    .subscribe(x => {
        let countdown = Observable
            .interval(1000)
            .take(5) // Loop only 5 times
            .subscribe(y => {
                console.log(`attempt to log in... [${5 - y}]`);
                // You can call `countdown.unsubscribe()` if the login is successful and no longer need the countdown
            });
    });

Upvotes: 2

Related Questions