How to implement delay function in angular/typescript. Intuitive answer not working

Question

I have the following typescript method:

 public delete(propertyId:number):void{
         if (propertyId !== undefined){
            this.model.deleteProperty(propertyId)          
            .subscribe( data =>{                
               this.messageService.reportMessage(new Message(`Property ${propertyId} has been successfully deleted.`))  ;    
                delay(5000);            
                this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
                    this.router.navigate([this.state!.returnUrl]);                                 
                });        

            }); 
        }        

I am expecting the system to display the success message for 5 seconds and redirect.

The delay is not happening.

Any ideas about what I am doing wrong?

Thank you for any insight.

Answer 1

You need to pipe it:

 public delete(propertyId:number):void{
         if (propertyId !== undefined){
            this.model.deleteProperty(propertyId)
            .pipe(
                tap(_ => {
                    this.messageService.reportMessage(new Message(`Property ${propertyId} has been successfully deleted.`))
                }),
                delay(5000)
            )       
            .subscribe( data =>{                
                this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
                    this.router.navigate([this.state!.returnUrl]);                                 
                });        

            }); 
        }