{"id":32538761,"url":"https://github.com/mkeller1992/mk-magic-messages-library","last_synced_at":"2026-01-17T02:55:00.470Z","repository":{"id":86624680,"uuid":"571027043","full_name":"mkeller1992/mk-magic-messages-library","owner":"mkeller1992","description":"An Angular library to display alerts, dialogs and more","archived":false,"fork":false,"pushed_at":"2025-12-04T18:01:21.000Z","size":3108,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-08T01:52:03.074Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mkeller1992.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-11-26T23:03:21.000Z","updated_at":"2025-12-04T18:00:06.000Z","dependencies_parsed_at":"2024-01-14T19:44:46.644Z","dependency_job_id":"8955bf5b-8728-473a-b792-b259c1d429f8","html_url":"https://github.com/mkeller1992/mk-magic-messages-library","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/mkeller1992/mk-magic-messages-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fmk-magic-messages-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fmk-magic-messages-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fmk-magic-messages-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fmk-magic-messages-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mkeller1992","download_url":"https://codeload.github.com/mkeller1992/mk-magic-messages-library/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mkeller1992%2Fmk-magic-messages-library/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28492590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T02:39:23.645Z","status":"ssl_error","status_checked_at":"2026-01-17T02:34:19.649Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-28T14:01:34.100Z","updated_at":"2026-01-17T02:55:00.465Z","avatar_url":"https://github.com/mkeller1992.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Notifications"],"readme":"# Mk-Magic-Alerts\n\n[![npm version](https://badge.fury.io/js/mk-magic-alerts.svg)](https://badge.fury.io/js/mk-magic-alerts)\n![build status](https://github.com/mkeller1992/mk-magic-messages-library/actions/workflows/npm-publish.yml/badge.svg)\n[![codecov](https://codecov.io/gh/mkeller1992/mk-magic-messages-library/graph/badge.svg?token=FZYEC8Y47D)](https://codecov.io/gh/mkeller1992/mk-magic-messages-library)\n\nDisplay animated success-, info-, warning- and error-alerts in your Angular application.\n\nThe latest library version is compatible with **Angular 21**.\nStarting with version 20.1.0, `mk-magic-alerts` is fully **zoneless-compatible**. \n\n---\n\n## Demo\nhttps://mkeller1992.github.io/mk-magic-messages-library\n\n---\n\n## Install\n\n#### [npm](https://www.npmjs.com/package/mk-magic-alerts)\n```\nnpm i mk-magic-alerts\n```\n\n## Setup\n\n### For apps based on `Standalone Components`\nMake sure `provideAnimations()` is included in your `main.ts`:\n```typescript\nimport { provideAnimations } from '@angular/platform-browser/animations';\n\nbootstrapApplication(AppComponent, {\n\tproviders: [\n\t\timportProvidersFrom(),\n\t\tprovideRouter(APP_ROUTES),\n\t\tprovideAnimations() // this is required!\n\t]\n}).catch(err =\u003e console.error(err));\n```\n\n### For apps based on `ngModule`\nMake sure `BrowserAnimationsModule` is included in your `@NgModule`:\n```typescript\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    BrowserAnimationsModule // this is required!\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Usage\n1. Inject `AlertsService` into your component to invoke different kind of alerts as shown below:\n\n```typescript\nimport { AlertsService } from 'mk-magic-alerts';\n\nprivate readonly alertsSvc = inject(AlertsService);\n\nngOnInit(): void {\n  const displayDurationInMillis = 3000;\t\t\n  this.alertsSvc.showError('Show me for 3 sec', displayDurationInMillis);\n\n  this.alertsSvc.showError('Show me till user clicks exit');\n\n  this.alertsSvc.showInfo('Info Alert');\n  this.alertsSvc.showSuccess('Success Alert');\n  this.alertsSvc.showWarning('Warn Alert');\n}\n```\n\n2. To remove all active alerts, invoke the `clear()`-method:\n\n```typescript\nthis.alertsSvc.clear();\n```\n\n## Mocking AlertsService for Unit Testing\n\nTo facilitate unit testing of components and services that depend on `AlertsService`, our library provides a `MockAlertsService`. This mock implementation offers empty methods corresponding to those of the actual `AlertsService`, allowing you to easily spy on them and control their behavior in your tests without having to worry about their real implementations.\n\n### Usage\n\n1. **Import the Mock Service**: First, ensure that the `MockAlertsService` is imported into your test file.\n\n    ```typescript\n    import { MockAlertsService } from 'mk-magic-alerts';\n    ```\n\n2. **Configure TestBed**: Use `MockAlertsService` to replace `AlertsService` in your TestBed configuration. This is done by providing it in the `providers` array of your test module setup.\n\n    ```typescript\n    TestBed.configureTestingModule({\n      // Other configuration...\n      providers: [\n        { provide: AlertsService, useClass: MockAlertsService }\n      ]\n    });\n    ```\n\n    Alternatively, if you prefer to directly instantiate and provide the mock without Angular's dependency injection, you can create an instance of the mock and use `useValue`:\n\n    ```typescript\n    const mockAlertsService = new MockAlertsService();\n    TestBed.configureTestingModule({\n      // Other configuration...\n      providers: [\n        { provide: AlertsService, useValue: mockAlertsService }\n      ]\n    });\n    ```\n\n3. **Spying on Methods**: In your tests, you can now spy on the `MockAlertsService` methods using Jest's `spyOn` method. This allows you to mock return values, verify that the methods were called, and inspect the arguments passed to them.\n\n    ```typescript\n    it('should call showInfo method', () =\u003e {\n      // Assuming you're inside a describe block for a component or service\n      const alertsService = TestBed.inject(AlertsService);\n      const showInfoSpy = jest.spyOn(alertsService, 'showInfo');\n      // Trigger the action that results in showInfo being called\n      expect(showInfoSpy).toHaveBeenCalledWith('Expected text', 10000);\n    });\n    ```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller1992%2Fmk-magic-messages-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmkeller1992%2Fmk-magic-messages-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmkeller1992%2Fmk-magic-messages-library/lists"}