Alerts

Component is build based on Ngx-toastr

Alerts works basing on Alerts component and Alerts service.

Alerts service can be used if it is needed to subscribe single alert actions. Alert actions are:

• confirm: first icon in right alert section;

• action: second icon in right alert section.

To use correctly alert actions it is required to provide unique ID for the alert.

Usage

app.html

<div style="padding: 30px;">
    <cf-button md-raised-button [properties]="messageButton" (click)="sendMessage()"></cf-button>
    <cf-button md-raised-button [properties]="warningButton" (click)="sendWarning()"></cf-button>
    <cf-button md-raised-button [properties]="errorButton" (click)="sendError()"></cf-button>
</div>

<cf-alerts #alertsComp></cf-alerts>

<h4>List of alerts ID's and actions:</h4>
<ul>
    <li *ngFor="let alert of alerts">
        Alert id: <b>{{alert.id}}</b>, 
        action type: <b>{{alert.action}}</b>
    </li>
</ul>

app.ts

@ViewChild('alertsComp') alertsComp;

alerts = [];

messageButton = new ButtonModel({label: "Show message"});
warningButton = new ButtonModel({label: "Show warning"});
errorButton = new ButtonModel({label: "Show error"});

myMessage: AlertModel = {
  message: "This is demo info message",
  options: {
    id: "alertID-1",
    timeOut: 7000,
    extendedTimeOut: 0,
    positionClass: "toast-top-left",
    confirmIcon: {
      name: "stars",
      type: "mi"
    },
    cancelIcon: {
      name: "star",
      type: "mi"
    }
  }
};

myWarning: AlertModel = {
  message: "This is demo warn message",
  options: {
    id: "alertID-2",
    timeOut: 1000,
    extendedTimeOut: 0,
    positionClass: "toast-top-right",
  }
};

myError: AlertModel = {
  message: "This is demo error message",
  options: {
  id: "alertID-3",
    timeOut: 3000,
    extendedTimeOut: 0,
    positionClass: "toast-bottom-right",
    actionButton: true,
  }
};  

sendMessage() { this.alertsComp.showMessage(this.myMessage); }

sendWarning() { this.alertsComp.showWarning(this.myWarning); }

sendError() { this.alertsComp.showError(this.myError); }    

constructor(public alertsService: CfAlertsService) {}

ngOnInit() {
  this.alertsService.onAlertOk.subscribe(id => {
    console.log('DEMO onAlertOk', id);
    this.alerts.push({id: id, action: 'confirm'});
  });

  this.alertsService.onAlertCancel.subscribe(id => {
    console.log('DEMO onAlertCancel', id);
    this.alerts.push({id: id, action: 'cancel'});
  });
}

Alerts input properties

Attr	Sub attr	Sub attr	Type	Details
title			string	Title of alert. Optional
message			string	Message of alert. Required
options			object	Alert options. Optional
	id		string	Alert id. Optional, but must be set for correct work with alerts actions events.
	theme		object	Alert theme object. Optional
		name	string	Alert theme name. Optional. Means real existing app theme
		class	string	Alert theme class. Optional. Class to be attached on the same html element to redefine some given theme styles
	icon		object	Alert icon object. Optional.
		show	boolean	If to show alert icon. Optional. By default not shown
		type	string	Alert icon type. Optional, but must be set when icon name is provided
		name	string	Alert icon name. Optional.
	confirmIcon		object	Alert icon object for cancel button. Optional.
		name	string	Icon name
		type	string	Icon type
	cancelIcon		object	Alert icon object for cancel button. Optional.
		name	string	Icon name
		type	string	Icon type
	timeOut		number	Alert timeout
	actionButton		boolean	If to show action button
	closeButton		boolean	If to show close button
	progressBar		boolean	If to show progressBar
	positionClass		string	Possition class to set alert possition. Can be: toast-top-left, toast-top-right, toast-bottom-left, toast-bottom-right
	messageClass		string	Class for alert message
	titleClass		string	Class for alert title
	autoDismiss		boolean	Dismiss current toast when max is reached
	extendedTimeOut		number	Alert time to close after hover on alert
	maxOpened		number	Maximum number of alerts opened
	newestOnTop		boolean	If to open newest alert on top of other alerts
	onActivateTick		boolean	Fire ApplicationRef.tick() from the toast component when activated. Helps show toast from a websocket event
	tapToDismiss		boolean	Close on click
	preventDuplicates		boolean	To prevent duplicates

Alerts functions

Function	Details
showMessage(alert)	Function to show info alert. Parameter: alert object.
showWarning(alert)	Function to show warning alert. Parameter: alert object.
showError(alert)	Function to show error alert. Parameter: alert object.
clearAll()	Function to close all alerts
clearLast()	Function to close last alert