Ngx-all-in-one-alerts NPM

Ngx All In One Alerts

This is angular all in one alert library

Demo

click here

Alt text

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