Display animated success, info, warning and error alerts in your Angular application.
The latest library version is compatible with Angular 22.
Starting with version 20.1.0, mk-magic-alerts is fully zoneless-compatible.
https://mkeller1992.github.io/mk-magic-messages-library
npm i mk-magic-alertsNo required setup is needed. You can inject AlertsService directly.
By default, alerts use AlertEntryAnimation.DOT. Existing applications do not need to change anything.
If you want to choose another animation or appearance globally, add provideMagicAlerts() to your application providers:
import { provideZonelessChangeDetection } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AlertAppearance, AlertEntryAnimation, provideMagicAlerts } from 'mk-magic-alerts';
import { AppComponent } from './app/app.component';
import { APP_ROUTES } from './app/app.routes';
bootstrapApplication(AppComponent, {
providers: [
provideRouter(APP_ROUTES),
provideZonelessChangeDetection(),
provideMagicAlerts({
entryAnimation: AlertEntryAnimation.BURST,
alertAppearance: AlertAppearance.GRADIENT
})
]
}).catch(err => console.error(err));The config option is called alertAppearance and defaults to AlertAppearance.CLASSIC.
Available entry animations:
| Animation | Description |
|---|---|
AlertEntryAnimation.DOT |
Starts as a small dot in the top-left corner and grows into the alert. |
AlertEntryAnimation.BURST |
Pops out from the center with a short, elastic overshoot. |
AlertEntryAnimation.DROP |
Drops in from above with a subtle bounce. |
AlertEntryAnimation.SLIDE_LEFT |
Slides in horizontally from the left. |
AlertEntryAnimation.SLIDE_RIGHT |
Slides in horizontally from the right. |
AlertEntryAnimation.UNFOLD |
Opens vertically from the top, like unfolding paper. |
You can also switch the entry animation at runtime before showing an alert:
this.alertsSvc.setEntryAnimation(AlertEntryAnimation.BURST);
this.alertsSvc.showInfo('Shown with burst animation');By default, alerts use AlertAppearance.CLASSIC. Existing applications do not need to change anything.
Available alert appearances:
| Appearance | Preview | Description |
|---|---|---|
AlertAppearance.CLASSIC |
 |
The existing default style with a flat background and visible border. |
AlertAppearance.GRADIENT |
 |
A softer gradient style with a stronger icon badge. |
You can also switch the alert appearance at runtime before showing an alert:
this.alertsSvc.setAlertAppearance(AlertAppearance.GRADIENT);
this.alertsSvc.showInfo('Shown with gradient appearance');Inject AlertsService into your component and call the alert methods:
import { Component, inject } from '@angular/core';
import { AlertsService } from 'mk-magic-alerts';
@Component({
selector: 'app-example',
template: '<button type="button" (click)="showAlert()">Show alert</button>'
})
export class ExampleComponent {
private readonly alertsSvc = inject(AlertsService);
showAlert(): void {
const displayDurationInMillis = 3000;
this.alertsSvc.showError('Show me for 3 sec', displayDurationInMillis);
this.alertsSvc.showInfo('Info Alert');
this.alertsSvc.showSuccess('Success Alert');
this.alertsSvc.showWarning('Warning Alert');
}
}To show an error alert until the user dismisses it, call showError() without a custom duration:
this.alertsSvc.showError('Show me until the user dismisses me');To remove all active alerts, call clear():
this.alertsSvc.clear();The library provides MockAlertsService for tests that depend on AlertsService. It exposes the same public methods with empty implementations, so you can spy on them without triggering the real alert behavior.
import { TestBed } from '@angular/core/testing';
import { AlertsService, MockAlertsService } from 'mk-magic-alerts';
TestBed.configureTestingModule({
providers: [
{ provide: AlertsService, useClass: MockAlertsService }
]
});You can then use your test runner's spy API:
it('should call showInfo', () => {
const alertsService = TestBed.inject(AlertsService);
const showInfoSpy = vi.spyOn(alertsService, 'showInfo');
alertsService.showInfo('Expected text');
expect(showInfoSpy).toHaveBeenCalledWith('Expected text');
});