{"id":15693649,"url":"https://github.com/theoomoregbee/ngalert","last_synced_at":"2025-05-08T04:49:36.446Z","repository":{"id":57147618,"uuid":"118722035","full_name":"theoomoregbee/ngAlert","owner":"theoomoregbee","description":"Simple Alert Component, to handle different type of alert, confirmation --\u003e ERROR, WARNING, SUCCESS, INFO","archived":false,"fork":false,"pushed_at":"2019-01-02T05:58:51.000Z","size":1354,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-08T04:49:28.024Z","etag":null,"topics":["alert","angular","angular-components","angular2","angular4","angular5","error","info","message","success","warning"],"latest_commit_sha":null,"homepage":"https://theoomoregbee.github.io/ngAlert","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/theoomoregbee.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":"2018-01-24T06:22:30.000Z","updated_at":"2021-03-11T00:28:17.000Z","dependencies_parsed_at":"2022-09-06T15:02:25.014Z","dependency_job_id":null,"html_url":"https://github.com/theoomoregbee/ngAlert","commit_stats":null,"previous_names":["theo4u/ngalert"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2FngAlert","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2FngAlert/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2FngAlert/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theoomoregbee%2FngAlert/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theoomoregbee","download_url":"https://codeload.github.com/theoomoregbee/ngAlert/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253002841,"owners_count":21838637,"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","angular","angular-components","angular2","angular4","angular5","error","info","message","success","warning"],"created_at":"2024-10-03T18:46:57.034Z","updated_at":"2025-05-08T04:49:36.427Z","avatar_url":"https://github.com/theoomoregbee.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgAlert\n[![Travis](https://img.shields.io/travis/theo4u/ngAlert.svg)](https://travis-ci.org/theo4u/ngAlert)\n[![npm](https://img.shields.io/npm/v/@theo4u/ng-alert.svg)](https://www.npmjs.com/package/@theo4u/ng-alert)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nThis is a simple alert component, to help show different level of alerts and easy configurations on how you want it to act. Also, supports confirmation alert. Oh yea! easy to style to follow your own feel.\n\n![Error Message](/img/error.png)\n![Info Message](/img/info.png)\n![Warning Message](/img/warning.png)\n![Success  Message](/img/success.png)\n![Confirm  Message](/img/confirm.png)\n\n## Installation\n```sh\nnpm install --save @theo4u/ng-alert\n```\n\nFor Angular 5 and below use \n\n```sh\nnpm install --save @theo4u/ng-alert@1.6.0\n```\n\nThen open open up your `styles.css` and add this line (for easy customization, don't forget to send a PR for nice UIs, so other peeps can use it :winks:)\n```\n@import \"../node_modules/@theo4u/ng-alert/style.css\";\n```\n\nUpdate your `app.module.ts` **imports** array  \n```typescript\nimport { NgAlertModule } from '@theo4u/ng-alert';\n...\nimports: [\n    BrowserModule,\n    NgAlertModule,\n    ....\n  ]\n```\n\n## Demo\n[HERE](https://theo4u.github.io/ngAlert)\n\n## Usage\n```\n\u003cng-alert [(message)]=\"message\" [dismissable]=\"true\"\u003e\u003c/ng-alert\u003e\n```\n* **message**: is a two bounded attribute which takes in `IMessage`\n  ```typescript\n        export interface IMessage {\n        type: MessageType,\n        message: string,\n        title?: string,\n        buttons?: Array\u003c{\n          label: string,\n          action?: Function,\n          css?: string\n        }\u003e\n        } \n  ```\n  `type` can be `MessageType.info`, `MessageType.success`, `MessageType.error` or `MessageType.warning`\n* **dismissable**: is an optional field to allow users to close the alert or not.   `boolean`. Defaults to \n* **closeType**: is used to determine which type of close button should be place on it, and only accepts `CloseType` enum. Defaults to `CloseType.TIMES`\n```typescript\n    export enum CloseType {\n    TIMES, NORMAL\n    }\n\n// usage\n// NORMAL -\u003e the close button is beneath the alert message\n// TIMES -\u003e the close button is by the far right with x\n\u003cng-alert [(message)]=\"message\" [dismissable]=\"true\" [closeType]=\"closeTypes.NORMAL\"\u003e\u003c/ng-alert\u003e\n```\n\n\n## App Level Alert \nYou can decide to make use of the `NgAlertService` to push new messages, useful if you want to maintain a central point of alerting your users of anything, like at the top of your page.\n```typescript\n  ngOnInit() { // this should be place in the location where you the ngAlert component markup is called\n    this._alertSub = this._ngAlert.getSource().subscribe(message =\u003e {\n      this.message = message;\n    })\n  }\n```\nFrom any location withing your app, just push the new messages with `NgAlertService.push(IMessage);` after adding it to your constructor.\n\n**NB**: any of the following above can be imported like below\n```typescript\nimport { NgAlertService, IMessage, MessageType, CloseType  } from '@theo4u/ng-alert';\n```\n\n## Confirmation Alert\nIt can also serve as a confirmation alert, if `buttons` properties of `IMessage` is passed in, which is an array\n* **label**: the text to show for your button\n* **action**: the action to perform when the button is clicked \n* **css**: your custom css to pass in, since its just a plain `\u003cbutton\u003e\u003c/button\u003e`\n\n\n## Example Usage\nCheck [app.component.ts](./src/app/app.component.ts)\n\n## Contribution\nCheck [CONTRIBUTING.md](CONTRIBUTING.md). `npm start` instead of `ng serve` so you easily watch for scss changes while playing with the scss files.\nMakes use of \n* [angular-cli-ghpages](https://github.com/angular-schule/angular-cli-ghpages) for pushing to gh-page 👍, check `deploy script` [package.json](package.json)\n\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoomoregbee%2Fngalert","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheoomoregbee%2Fngalert","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheoomoregbee%2Fngalert/lists"}