CODEWITHSUNDEEP
javascriptangularrxjsrxjs-observables
Ajay Chandan
Ajay Chandan

Reputation: 21

Delay inside/after subscribe in angular

I'm setting isUpdate flag true in subscribe and I have to set it back to false after some delay so that I can show a quick popup

I have tried using .pipe(delay(2000)).subscribe However the entire callback is getting delayed 

this.sp.myservice(data).subscribe(
data => {
this.isUpdate = true;
//something like this but not setTimeout
setTimeout(() => 
{
this.isUpdate = false
}, 2000) 
}
);

Expected Result: isUpdated should be false in some time

Upvotes: 1

Views: 6790

Answers (1)

user4676340
user4676340

Reputation:

There are better ways to display a popup.

But to answer you, a clean way could be :

this.sp.myservice(data).pipe(
  tap(() => this.isUpdate = true),
  delay(5000),
).subscribe(() => this.isUpdate = false);

Live mode :

rxjs.of('some mock value').pipe(
  rxjs.operators.tap(() => console.log('Wait 5 seconds')),
  rxjs.operators.delay(5000),
).subscribe(() => console.log('See ? I am delayed.'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js"></script>

Edit

for your request :

this.sp.myservice(data).pipe(
  tap(data => this.isUpdate = this.data && this.data.status && this.data.status.code === 0),
  delay(5000),
  catchError(err => throwError(err))
).subscribe(
  () => this.isUpdate = false,
  err => console.log('an error occured')
);

Live mode :

rxjs.throwError('some error mock value').pipe(
  rxjs.operators.tap(() => console.log('Wait 5 seconds')),
  rxjs.operators.delay(5000),
  rxjs.operators.catchError(err => rxjs.throwError(err))
).subscribe(
  () => console.log('See ? I am delayed.'),
  err => console.log('an error occured')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.js"></script>

Upvotes: 3

Related Questions