core/alert/alert.service.ts
A service which allows to display alerts.
| providedIn | root |
No results matching.
Alert service provides methods for adding different types of alerts.
Simple methods for basic usage. Each method can be used with optional details parameter for showing details.
Example : import { AlertService } from '@c8y/ngx-components';
(...)
constructor(protected alertService: AlertService) {}
(...)
showAlerts () {
// simple usage
this.alertService.success( 'Success message' );
this.alertService.danger( 'Danger message' );
this.alertService.info( 'Info message' );
this.alertService.warning( 'Warning message' );
this.alertService.addByText('danger', 'Danger message');
// alert with details
this.alertService.danger ( 'Error message', 'Details of error' );
}Alert timeout property is responsible for hiding alert after defined (in milliseconds) time.
Example : import { Alert, AlertService } from '@c8y/ngx-components';
(...)
constructor(protected alertService: AlertService) {}
(...)
showAlert () {
const alert: Alert = {
type: 'danger',
text: 'Danger message',
timeout: 5000 // Alert will disappear after 5 seconds
}
this.alertService.add( alert );
}Alert text can be defined as HTML, allowHtml property needs to be set as true.
import { Alert, AlertService } from '@c8y/ngx-components';
(...)
constructor(protected alertService: AlertService) {}
(...)
showAlert () {
const alert: Alert = {
type: 'danger',
text: '<div>My message</div>',
allowHtml: true
}
this.alertService.add( alert );
}Alerts provide two callbacks:
import { Alert, AlertService } from '@c8y/ngx-components';
(...)
constructor(protected alertService: AlertService) {}
(...)
showAlert () {
const onDetailCallback = () => { console.log('On detail button clicked') };
const onCloseCallback = () => { console.log('On close button clicked') };
const alert: Alert = {
type: 'danger',
text: '<div>My message</div>',
onDetail: onDetailCallback,
onClose: onCloseCallback
}
this.alertService.add( alert );
}