I have a basic notification system in place:
@Injectable({
providedIn: 'root',
})
export class NotificationService {
constructor(private snackBar: MatSnackBar) {}
public showNotification(message: string, style: string = 'success') {
this.snackBar.openFromComponent(SnackbarComponent, {
data: message,
panelClass: style,
});
}
public handleErrors(response: any): void {
if (!response.error?.message) return;
this.snackBar.openFromComponent(SnackbarComponent, {
data: response.error?.message,
panelClass: 'warning',
});
}
}
This service manages the display of snack bar messages and handles errors from HTTP responses. When using it like so:
.subscribe(
() => {
this.loading = false;
this.notificationService.showNotification(
'An email has been sent to your address. Please check your inbox.'
);
this.router.navigate(['/login']);
},
(response: any) => this.notificationService.handleErrors(response)
);
Everything functions correctly. I want to modify this line:
(response: any) => this.notificationService.handleErrors(response)
To look like this:
this.notificationService.handleErrors
But upon doing so, an error occurs in my notification service indicating:
Cannot read property 'openFromComponent' of undefined
The issue may be due to "this" no longer referencing the service. How can I retain access to this within the method if I update it to the latter format?