Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zsfarkas/ng2-alert-center
A small angular2 module for centralized application bootstrap alerts.
https://github.com/zsfarkas/ng2-alert-center
alert angular2 bootstrap bootstrap3 library module typescript
Last synced: 9 days ago
JSON representation
A small angular2 module for centralized application bootstrap alerts.
- Host: GitHub
- URL: https://github.com/zsfarkas/ng2-alert-center
- Owner: zsfarkas
- Created: 2017-02-21T21:43:46.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-07T07:00:59.000Z (over 6 years ago)
- Last Synced: 2025-01-31T22:51:14.314Z (20 days ago)
- Topics: alert, angular2, bootstrap, bootstrap3, library, module, typescript
- Language: TypeScript
- Size: 164 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ng2-alert-center - A small angular2 module for centralized application bootstrap alerts. (Uncategorized / Uncategorized)
README
# ng2-alert-center
Alert center provides an alert service and an alert component, you can include in your Angular 2 project.
Currently it uses bootstrap 3 for styling. If you don't use bootstrap, you can just use the bootstrap classes to apply your own styles.
## Status
[](https://travis-ci.org/zsfarkas/ng2-alert-center)
[](https://npmjs.org/ng2-alert-center)
[](https://npmjs.org/ng2-alert-center)
## Install
`npm install ng2-alert-center --save`
## Usage
Hopefully, it is easy to understand by this example, how to use this module. Refer the API description for further information.
In you module add.
```
import { AlertCenterModule } from 'ng2-alert-center';
@NgModule({
imports: [
...
AlertCenterModule,
...
],
...
}]
```
and the next thing is to import the components and implement the methods.
```
import { AlertCenterService, Alert, AlertType } from 'ng2-alert-center'
@Component({
template: `
`
})
export MyComponent {
/* Inject the alert service into your component. */
constructor(private service: AlertCenterService) { }
/* Call this method to send an alert. */
sendAnAlert() {
const alert = new Alert(AlertType.INFO, 'Test alert.');
this.service.alert(alert);
}
/* Let the alert disappear by itself in 5 seconds */
sendAnAutoDismissingAlert() {
const alert = Alert.create(AlertType.INFO, 'Auto dismissing test alert.', 5000);
this.service.alert(alert);
}
}
```
## Show case
You can test the module online:
* http://ng2-alert-center-demo.farkas.land
## Roadmap
Please consider, that this module is under development. Following features are coming:
* Links in alerts
* Support for i18n
* More tests
## API
### Component ``
Use this component to define the place, where alerts appear in your application. You can use individual styles for the positioning.
#### Inputs:
`animation`:
* it defines the enabled animation of appearing disappearing of alerts.
* possible values: `'none'`, `'decent'`, `'fancy'`
* default: `'none'`
`htmlTextEnabled`:
* set it `true` to enable html in alert text.
* possible values: `true|false`
* default: `false`
### Injectable Service `AlertCenterService`
Inject this class in your components, which you want to send an alert from.
#### Properties
`alerts: Observable`
The component `` will be informed via this observable, if an alert was sent.
#### Methods:
`alert (anAlert: Alert): void`
Informs the observing components about a new alert.
### Model class `Alert`
Represents an alert, which will be displayed by the component ``.
#### Properties:
`alertType: AlertType`
default: none
`text: string`
default: none
`textStrong: string`
default: `''`
`autoDismissTime: number`
default: `0`
`dismissable: boolean`
default: `true`
#### Methods:
`constructor (alertType: AlertType, text: string, textStrong = '', dismissType = 0)`