I created centralized error handling service using BehaviorSubject in Angular v 17.It does not working in the expected way!
The problem areas are :
NotificationService -->  the centralized error handler.
NotificationComponent --> Reusable User Friendly Error and Progress message showing popup modal,i directly added it in my   Appcomponent.
Surrender Pet Component --> Where i try to use the Notification for showing option.
I thik those BhaviourSubjects not emitting the data the way i expected
NotificationService:
    import { Injectable } from '@angular/core';
    import { BehaviorSubject, Subject } from 'rxjs';

    @Injectable({
    providedIn: 'root'
    })
    export class NotificationService {
       successMessageSubject = new BehaviorSubject<string | null>(null);
       errorMessageSubject = new BehaviorSubject<string | null>(null);

       successMessageAction$ = this.successMessageSubject.asObservable();
       errorMessageAction$ = this.errorMessageSubject.asObservable();

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

   setErrorMessage(message: string) {
   this.errorMessageSubject.next(message);
    console.log(this.errorMessageSubject.getValue());
   }

   clearSuccessMessage() {
    this.successMessageSubject.next(null);
    }

    clearErrorMessage() {
      this.errorMessageSubject.next(null);
    }

   clearAllMessages() {
    this.clearSuccessMessage();
    this.clearErrorMessage();
     }
    }


NotificationComponent :
import { Component, OnInit, inject } from '@angular/core';
import { NotificationService } from '../../../core/services/notifiaction/notification.service';
import { AsyncPipe, CommonModule, NgIf } from '@angular/common';
import { tap } from 'rxjs';

@Component({
  selector: 'app-notification',
  standalone: true,
  imports: [NgIf,AsyncPipe,CommonModule],
  templateUrl: './notification.component.html',
  styleUrl: './notification.component.scss',
 
})
export class NotificationComponent implements OnInit {
   
   private notificationService:NotificationService = inject(NotificationService);
   
  
   successMessage$ = this.notificationService.successMessageAction$.pipe(
     tap((message)=>{
      if(message){
      console.log('clicked')
      setTimeout(()=>{
        this.notificationService.clearAllMessages()  
      },5000)
    }
     })
   )

   errorMessage$ = this.notificationService.errorMessageAction$.pipe(
    tap((message)=>{
      console.log(message);
      if(message){
     console.log('clicked')
     setTimeout(()=>{
       this.notificationService.clearAllMessages()  
     },5000)
    }
    })
  )


   ngOnInit(): void {
    console.log("initialized")
  }
  }

Surrender Pet Component
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { ButtonComponent } from '../../../shared/components/button/button.component';
import { NgClass, NgIf, } from '@angular/common';
import { Component, inject } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { PetsAdopteService } from '../../../core/services/pets-adopte/pets-adopte.service';
import { SurrenderPet } from '../../../core/models/surrenderPet.model';
import { NotificationService } from '../../../core/services/notifiaction/notification.service';

@Component({
  selector: 'app-surrender-pet',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    NgClass,
    RouterLink,
    NgIf,
    ButtonComponent,
    HttpClientModule
  ],
  providers:[PetsAdopteService,NotificationService],
  templateUrl: './surrender-pet.component.html',
  styleUrl: './surrender-pet.component.scss'
})
export class SurrenderPetComponent {

  private petAdopteService=inject(PetsAdopteService);
  private notificationService=inject(NotificationService);

  submitted:boolean = false;

  registerPet= new FormGroup({
    name: new FormControl<string>('',[Validators.required]),
    phoneNo:new FormControl<string>('',[Validators.required]),
    petType:new FormControl<string> ('',[Validators.required]),
    location:new FormControl<string>('',[Validators.required]),
    otherDetails:new FormControl<string>('',[Validators.required])
  })

  onSubmit(){
      this.submitted = true;
      if(this.registerPet.valid){
       this.petAdopteService.sendPetSurrender_Request(this.registerPet.value as SurrenderPet).subscribe(
        {
          next:(data)=>{
         console.log(data);
        }
         
        }
       )
      }
  }
}


Notification Component html template:
<div class="z-40">
   <div class="z-40" *ngIf="successMessage$ | async as successMessage" id="toast-success" class=" fixed fixed bottom-5 right-5 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
       <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
           <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
               <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
           </svg>
           <span class="sr-only">Success icon</span>
       </div>
       <div class="ms-3 text-sm font-normal">{{successMessage}}</div>
       <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
           <span class="sr-only">Close</span>
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
       </button>
   </div>

   <div *ngIf="errorMessage$ | async as errorMessage" id="toast-failure" class=" fixed fixed bottom-5 right-5 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
       <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
           <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
               <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
           </svg>
           <span class="sr-only">Success icon</span>
       </div>
       <div class="ms-3 text-sm font-normal">{{errorMessage}}</div>
       <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-success" aria-label="Close">
           <span class="sr-only">Close</span>
           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
       </button>
   </div>
</div>
   



The PetsAdopteService where i called the setMessages functions!

    import { HttpClient } from '@angular/common/http';
    import { Injectable, inject } from '@angular/core';
    import { EMPTY, Observable, catchError, tap } from 'rxjs';
    import { SurrenderPet } from '../../models/surrenderPet.model';
    import { environment } from '../../../../environments/environment.development';
    import { petsSurrenderEndpoints } from '../../constants/APIEndPoints/petsAdopte.EndPoints';
    import { NotificationService } from '../notifiaction/notification.service';

    @Injectable({
      providedIn: 'root'
    })
    export class PetsAdopteService {

    constructor() { }

    private http:HttpClient=inject(HttpClient);
    private notificationService=inject(NotificationService);

    sendPetSurrender_Request(payload:SurrenderPet):Observable<SurrenderPet>{
     return this.http.post<SurrenderPet>                                                                              (environment.apiUrl+petsSurrenderEndpoints?.createSurrenderRequest,payload).pipe(
        tap((data)=>{
        this.notificationService.setSuccessMessage('Your request sent successfully')
      }),
      catchError((error)=>{
        console.log(error)
         this.notificationService.setErrorMessage("eROR");
         return EMPTY;
      })
     )
     }
    }



Is there any way to fix this problem with out choosing signal, because i want  to learn more about rxjs!