Web SDK documentation
  1. Injectables
  2. AlertService

File

core/alert/alert.service.ts

Description

A service which allows to display alerts.

Extends

StateService

Index

Properties
Methods
Accessors

Methods

add
add(alert: Alert)

Adds a new alert to the current state.

Parameters :
Name Type Optional
alert Alert No
Returns : void
addByText
addByText(type: alertType, txt: string, detailedData?: string)

Adds a alert by text.

Parameters :
Name Type Optional
type alertType No
txt string No
detailedData string Yes
Returns : void
addServerFailure
addServerFailure(error: any, type: alertType)

Creates alert from standard api errors. Should be used for errors generated by @c8y/client services.

Parameters :
Name Type Optional Default value Description
error any No

The error from server.
type alertType No 'danger'

The type of alert.
Returns : void
areSame
areSame(alert1: Alert, alert2: Alert)

Compares two alert objects. Alerts are same if text, type, detailed data and callbacks are same. Callbacks are same if they refer to the same function.

Parameters :
Name Type Optional
alert1 Alert No
alert2 Alert No
Returns : boolean
clearAll
clearAll()

Clears all alerts.

Returns : void
createSuccess
createSuccess(createdObject)

Shorthand for a create successful alert.

Parameters :
Name Optional Description
createdObject No

The object which was created.
Returns : () => void

A function that can be executed to show the msg.
danger
danger(text: string, detailedData?: string)

A shorthand to display a simple danger message.

Parameters :
Name Type Optional Description
text string No

The danger text.
detailedData string Yes

The text with additional information.
Returns : void
info
info(text: string, detailedData?: string)

A shorthand to display a simple info message.

Parameters :
Name Type Optional Description
text string No

The info text.
detailedData string Yes

The text with additional information.
Returns : void
list
Use alertService.alerts instead.
list()

Returns all alerts.

Returns : Alert[]
remove
remove(alert: Alert)

Remove an alert from the current state.

Parameters :
Name Type Optional
alert Alert No
Returns : void
removeLastDanger
removeLastDanger()

Removes last danger alert. It can be used e.g. in the case of a failed request which triggered an alert, to hide it from user.

 try {
   // something that might throw a danger server msg
 } catch (ex) {
  this.alertService.removeLastDanger();
 }
Returns : void
saveSuccess
saveSuccess(savedObject: string)

Shorthand for a save successful alert.

Parameters :
Name Type Optional Description
savedObject string No

The object which was saved.
Returns : () => void

A function that can be executed to show the msg.
success
success(text: string, detailedData?: string)

A shorthand to display a simple success message.

Parameters :
Name Type Optional Description
text string No

The success text.
detailedData string Yes

The text with additional information.
Returns : void
update
update(alert: Alert, fieldsToUpdate: Partial<Alert>)

Updates matching alert with provided values.

Parameters :
Name Type Optional
alert Alert No
fieldsToUpdate Partial<Alert> No
Returns : void
warning
warning(text: string, detailedData?: string)

A shorthand to display a simple warning message.

Parameters :
Name Type Optional Description
text string No

The warning text.
detailedData string Yes

The text with additional information.
Returns : void
Protected emitNewState
emitNewState()

Emits a new state.

Returns : void
map
map(mappedProperty: (undefined) => void)

Maps to a property and just returns that property.

Parameters :
Name Type Optional Description
mappedProperty function No

The property to map to.
Returns : Observable<any>

Properties

Protected Abstract state$
Type : BehaviorSubject<any> | any

Saves the state. Should not be accessible directly. Use map or the getter to access the state. Use functions in the implementation to change the state.

Accessors

state
getstate()

Returns all alerts.

AlertService

Alert service provides methods for adding different types of alerts.

Usage examples

Basic usage

Simple methods for basic usage. Each method can be used with optional details parameter for showing details.

  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' );
  }

Custom timeout

Alert timeout property is responsible for hiding alert after defined (in milliseconds) time.

  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 );
  }

Using html/TemplateRef for presenting 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 );
  }

Using callbacks

Alerts provide two callbacks:

  • onDetail: when "show detail" button are clicked
  • onClose: when alert is closed by user
  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 );
  }

results matching ""

    No results matching ""