The AlertService provides a simple API for displaying user notifications using Angular Material’s snackbar component with built-in internationalization support.
Import
import { AlertService } from '@jet/services/alert/alert.service';
Usage
Basic Alert
import { inject } from '@angular/core';
import { AlertService } from '@jet/services/alert/alert.service';
export class MyComponent {
readonly #alertService = inject(AlertService);
showMessage() {
this.#alertService.showAlert('Operation completed successfully!');
}
}
Alert with Custom Action
this.#alertService.showAlert(
'File uploaded successfully',
'View',
() => {
// Navigate to file viewer
this.router.navigate(['/files']);
}
);
Error Alert
try {
await this.apiService.saveData();
this.#alertService.showAlert('Data saved successfully');
} catch (error) {
this.#alertService.showErrorAlert('Failed to save data');
}
Default Error Message
// Shows localized "Something went wrong" message
this.#alertService.showErrorAlert();
Methods
showAlert
Displays a snackbar notification with an optional action button.
The message to display in the alert
cta
string
default:"Localized 'OK'"
The call-to-action button text. Defaults to translated “OK” text
Optional callback function to execute when the action button is clicked
This method does not return a value
/home/daytona/workspace/source/src/app/services/alert/alert.service.ts:24
public showAlert(
message: string,
cta: string = this.#translocoService.translate('alerts.ok'),
action?: () => void,
): void
// Simple alert
this.alertService.showAlert('Profile updated');
// With custom button text
this.alertService.showAlert('New message received', 'Read');
// With action callback
this.alertService.showAlert(
'Changes saved',
'Undo',
() => this.undoChanges()
);
showErrorAlert
Displays an error notification with a default or custom error message.
message
string
default:"Localized 'Something went wrong'"
The error message to display. Defaults to translated error message
This method does not return a value
/home/daytona/workspace/source/src/app/services/alert/alert.service.ts:43
public showErrorAlert(
message: string = this.#translocoService.translate('alerts.something-went-wrong'),
): void
try {
await this.performAction();
} catch (error) {
// Show custom error message
this.alertService.showErrorAlert('Unable to complete the action');
// Or use default message
this.alertService.showErrorAlert();
}
Features
Internationalization
All default text is automatically translated using the Transloco service:
- Default button text uses
alerts.ok translation key
- Default error message uses
alerts.something-went-wrong translation key
RTL Support
The service automatically handles right-to-left (RTL) languages by reading the directionality from SettingsService:
const matSnackBarRef = this.#matSnackBar.open(message, cta, {
direction: this.#directionality(),
});
Action Handling
When an action callback is provided, the service automatically:
- Subscribes to the snackbar’s action event
- Executes the callback once when clicked
- Automatically unsubscribes after first execution
Dependencies
The AlertService depends on:
- MatSnackBar - Angular Material’s snackbar component
- TranslocoService - For internationalization
- LoggerService - For service initialization logging
- SettingsService - For directionality (LTR/RTL) settings
Type Definitions
The service uses Angular Material’s built-in types:
import { MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
const ref: MatSnackBarRef<TextOnlySnackBar> = this.#matSnackBar.open(...);
Best Practices
- Use appropriate methods - Use
showErrorAlert() for errors and showAlert() for success/info messages
- Keep messages concise - Snackbars are designed for brief notifications
- Provide meaningful actions - If using action buttons, ensure they perform a relevant task
- Handle action callbacks - Always provide a callback function when using custom action buttons
- Leverage defaults - Use default messages for common scenarios to maintain consistency
Common Patterns
async onSubmit() {
try {
await this.formService.submit(this.form.value);
this.alertService.showAlert('Form submitted successfully');
this.router.navigate(['/success']);
} catch (error) {
this.alertService.showErrorAlert('Failed to submit form');
}
}
Confirmation with Action
deleteItem(id: string) {
this.itemService.delete(id);
this.alertService.showAlert(
'Item deleted',
'Undo',
() => this.itemService.restore(id)
);
}
Network Error Handling
this.http.get('/api/data').subscribe({
next: (data) => this.handleData(data),
error: () => this.alertService.showErrorAlert('Connection error')
});