{"id":13497217,"url":"https://github.com/zsfarkas/ng2-alert-center","last_synced_at":"2025-08-03T06:16:40.335Z","repository":{"id":57310765,"uuid":"82730224","full_name":"zsfarkas/ng2-alert-center","owner":"zsfarkas","description":"A small angular2 module for centralized application bootstrap alerts.","archived":false,"fork":false,"pushed_at":"2018-10-07T07:00:59.000Z","size":168,"stargazers_count":7,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T22:51:14.314Z","etag":null,"topics":["alert","angular2","bootstrap","bootstrap3","library","module","typescript"],"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/zsfarkas.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}},"created_at":"2017-02-21T21:43:46.000Z","updated_at":"2020-03-04T19:47:48.000Z","dependencies_parsed_at":"2022-08-26T06:20:33.631Z","dependency_job_id":null,"html_url":"https://github.com/zsfarkas/ng2-alert-center","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zsfarkas%2Fng2-alert-center","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zsfarkas%2Fng2-alert-center/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zsfarkas%2Fng2-alert-center/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zsfarkas%2Fng2-alert-center/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zsfarkas","download_url":"https://codeload.github.com/zsfarkas/ng2-alert-center/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["alert","angular2","bootstrap","bootstrap3","library","module","typescript"],"created_at":"2024-07-31T20:00:26.897Z","updated_at":"2025-02-12T00:31:41.659Z","avatar_url":"https://github.com/zsfarkas.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ng2-alert-center\n\nAlert center provides an alert service and an alert component, you can include in your Angular 2 project.\n\nCurrently it uses bootstrap 3 for styling. If you don't use bootstrap, you can just use the bootstrap classes to apply your own styles.\n\n## Status\n\n[![Build Status](https://travis-ci.org/zsfarkas/ng2-alert-center.svg?branch=master)](https://travis-ci.org/zsfarkas/ng2-alert-center)\n\n[![NPM](https://nodei.co/npm/ng2-alert-center.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/ng2-alert-center)\n[![NPM](https://nodei.co/npm-dl/ng2-alert-center.png?height=3\u0026months=6)](https://npmjs.org/ng2-alert-center)\n\n## Install\n\n`npm install ng2-alert-center --save`\n\n## Usage\n\nHopefully, it is easy to understand by this example, how to use this module. Refer the API description for further information.    \n\nIn you module add.\n```\nimport { AlertCenterModule }    from 'ng2-alert-center';\n@NgModule({\n  imports: [\n    ...\n    AlertCenterModule,\n    ...\n  ],\n  ...\n}]\n```\nand the next thing is to import the components and implement the methods.\n\n```\nimport { AlertCenterService, Alert, AlertType }             from 'ng2-alert-center'\n\n@Component({\n  template: `\n    \u003c!-- Insert the alert center component once into your html body /--\u003e\n    \u003cdiv class=\"my-alert-center-style\"\u003e\n      \u003cnac-alert-center [animation]=\"'fancy'\" [htmlTextEnabled]=\"true\"\u003e\u003c/nac-alert-center\u003e\n    \u003c/div\u003e\n  `\n})\nexport MyComponent {\n  /* Inject the alert service into your component. */\n  constructor(private service: AlertCenterService) { }\n  \n  /* Call this method to send an alert. */\n  sendAnAlert() {\n    const alert = new Alert(AlertType.INFO, 'Test alert.');\n    \n    this.service.alert(alert);\n  }\n  \n  /* Let the alert disappear by itself in 5 seconds */\n  sendAnAutoDismissingAlert() {\n    const alert = Alert.create(AlertType.INFO, 'Auto dismissing \u003cb\u003etest alert\u003c/b\u003e.', 5000);\n\n    this.service.alert(alert);\n  }\n}\n```\n\n## Show case\n\nYou can test the module online:\n\n* http://ng2-alert-center-demo.farkas.land\n\n## Roadmap\n\nPlease consider, that this module is under development. Following features are coming:\n\n* Links in alerts\n* Support for i18n\n* More tests\n\n## API\n\n### Component `\u003cnac-alert-center\u003e`\n\nUse this component to define the place, where alerts appear in your application. You can use individual styles for the positioning.\n\n#### Inputs:\n\n`animation`: \n\n* it defines the enabled animation of appearing disappearing of alerts. \n* possible values: `'none'`, `'decent'`, `'fancy'`\n* default: `'none'`\n\n`htmlTextEnabled`:\n\n* set it `true` to enable html in alert text.\n* possible values: `true|false`\n* default: `false`\n\n### Injectable Service `AlertCenterService`\n\nInject this class in your components, which you want to send an alert from. \n\n#### Properties\n\n`alerts: Observable\u003cAlert\u003e`\n\nThe component `\u003cnac-alert-center\u003e` will be informed via this observable, if an alert was sent.\n\n#### Methods:\n\n`alert (anAlert: Alert): void`\n\nInforms the observing components about a new alert. \n\n### Model class `Alert`\n\nRepresents an alert, which will be displayed by the component `\u003cnac-alert-center\u003e`.\n\n#### Properties:\n\n`alertType: AlertType`\n\ndefault: none\n\n`text: string`\n\ndefault: none\n\n`textStrong: string`\n\ndefault: `''`\n\n`autoDismissTime: number`\n\ndefault: `0`\n\n`dismissable: boolean`\n\ndefault: `true`\n\n#### Methods:\n\n`constructor (alertType: AlertType, text: string, textStrong = '', dismissType = 0)`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzsfarkas%2Fng2-alert-center","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzsfarkas%2Fng2-alert-center","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzsfarkas%2Fng2-alert-center/lists"}