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