ngx-all-in-one-alerts

Ngx All In One Alerts

This is angular all in one alert library

Demo

click here

Prerequisites

Only a few prerequisites to use this plugin.

• Angular font awesome ^0.7.0 click here to install

Installation

Node

npm install ngx-all-in-one-alerts --save

Configuration

Import NgxAllInOneAlertsModule to your app module.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NgxAllInOneAlertsModule } from "ngx-all-in-one-alerts";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxAllInOneAlertsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Add ngx-all-in-one-alerts selector for your application in template.

<ngx-all-in-one-alerts
  [showModal]="showMessage"
  [msgConfig]="alertConfiguration"
  (modalChangeStatus)="modalChangeStatus($event)"
></ngx-all-in-one-alerts>

Message configuration.

var showMessage = true;

var alertConfiguration = {
  title: "Your message title",
  description: "Your message description",
  closeOption: "default( 'true') if you dont required change to 'false'",
  alertType: "default",
  statusIcon: "default('false') if you required change to 'true'",
};

Alert message configuration | for example var alertConfiguration object

Name	Type	Default	Description
title	string	null	Your message title
description	string	null	Your message description
closeOption	boolean	true	default it's true, if you want to hide the message close button you should pass false
alertType	string	"default"	default alert Type is default, but their's several status that you can use such as success, warning, info, danger
statusIcon	boolean	false	default it's false, if you set it to true then message display with status icons

Properties

Name	Type	Default	Description
showModal	boolean	false	Here you should pass true then message get display.
msgConfig	Object	null	Here you should pass variable alertConfiguration for display your message

Events

Name	output receive	Description
modalChangeStatus	true or false	Callback to invoke on modal display status change.

Further help

contact me click here