Custom Angular notification message display problem using setTimeout()-CodePudding

I am facing issue with displaying notification message on the screen. When I click on the button to display the notification message, the popup is displayed and removed after several seconds defined in the interval. But when I click the button couple more times, the popup won´t stay visible for let´s say 2 seconds but only 1 or less, sometimes it only flashes on the screen.

I would like for it to behave in such a way, that when I click the button, any previous popup will be removed and new one will be displayed which will be displayed for 2 seconds (unless there is next click of the button and new popup is displayed) or the old popup will be visible for 2 second and new one will be placed above the previous one/s.

Would you have any suggestions for the correction:

Here is my code: HTML:

<div >
  <div >
    <scale-notification-message 
      variant="success" 
      opened
      @fadeAnimation
      *ngIf="successMessage$ | async as successMessage">
      {{ successMessage }}
    </scale-notification-message>
  </div>

  <button 
    type="button" 
     
    (click)="onClick()">
      Click
  </button>
</div>

TS file

import { tap } from 'rxjs/operators';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'notification-messages';
  visible: boolean = true;

  successMessage$: Observable<string> = this.notificationService.successMessageAction$.pipe(tap(_ => {
      setTimeout(() => {
        this.notificationService.clearSuccessMessage();
      }, 2000)
  })   
  );

  constructor(private notificationService: NotificationService) {}

  onClick() {
    this.notificationService.setSuccessMessage('Button clicked!');
  }
}

SERVICE

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  private successMessageSubject = new Subject<string>();
  successMessageAction$ = this.successMessageSubject.asObservable();

  setSuccessMessage(message: string) {
    this.successMessageSubject.next(message);
  }

  clearSuccessMessage() {
    this.setSuccessMessage('');
  }
}

CodePudding user response：

it's not working because in clear message you are setting the message again which would trigger a new timeout after 2 seconds.

for this case you can avoid that by changing your code to the following:

  successMessage$: Observable<string> = this.notificationService.successMessageAction$.pipe(tap(value => {
  if(!!value){
    setTimeout(() => {
      this.notificationService.clearSuccessMessage();
    }, 2000);
  }

})
);

Thank you very much for your correction. I corrected the code but I >still have the issue that when I click on the button again while the >previous popup is visible and then click again when the popup disappears, the popup stays visible for just a second or it just flashes on the screen. – Victoria 3 hours ago

for that you can use:

timeout: any = null;
successMessage$: Observable<string> = 
this.notificationService.successMessageAction$.pipe(tap(value => {
  if(!!this.timeout){
    clearTimeout(this.timeout);
  }
  if (!!value) {
    this.timeout = setTimeout(() => {
      this.notificationService.clearSuccessMessage();
      this.timeout = null;
    }, 2000);
  }
  })
);