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!
Okay, I finally found the solution. This strange behavior happened because I added services to the providers array of the standalone components. They were already provided at the root level. After I removed them, the logic worked correctly.