diff --git a/README.md b/README.md index 26fe9d0..7f967a4 100644 --- a/README.md +++ b/README.md @@ -3,12 +3,13 @@ [![npm](https://img.shields.io/npm/v/@theo4u/ng-alert.svg)](https://www.npmjs.com/package/@theo4u/ng-alert) [![npm](https://img.shields.io/npm/l/express.svg)]() -This is a simple alert component, to help show different level of alerts and easy configurations on how you want it to act. Oh yea! easy to style to follow your own feel. +This is a simple alert component, to help show different level of alerts and easy configurations on how you want it to act. Also, supports confirmation alert. Oh yea! easy to style to follow your own feel. ![Error Message](/img/error.png) ![Info Message](/img/info.png) ![Warning Message](/img/warning.png) ![Success Message](/img/success.png) +![Confirm Message](/img/confirm.png) ## Installation ```sh @@ -42,7 +43,12 @@ imports: [ export interface IMessage { type: MessageType, message: string, - title?: string + title?: string, + buttons?: Array<{ + label: string, + action?: Function, + css?: string + }> } ``` `type` can be `MessageType.info`, `MessageType.success`, `MessageType.error` or `MessageType.warning` @@ -70,6 +76,13 @@ From any location withing your app, just push the new messages with `NgAlertServ import { NgAlertService, IMessage, MessageType, CloseType } from '@theo4u/ng-alert'; ``` +## Confirmation Alert +It can also serve as a confirmation alert, if `buttons` properties of `IMessage` is passed in, which is an array +* **label**: the text to show for your button +* **action**: the action to perform when the button is clicked +* **css**: your custom css to pass in, since its just a plain `` + + ## Example Usage Check [app.component.ts](./src/app/app.component.ts) diff --git a/img/confirm.png b/img/confirm.png new file mode 100644 index 0000000..b0735c4 Binary files /dev/null and b/img/confirm.png differ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index d51d97e..b0b8cde 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -68,6 +68,7 @@ export class AppComponent implements OnInit, OnDestroy { label: 'Continue', css: 'continue', action: () => { + alert('something happened'); console.log('someting about me'); } } diff --git a/src/app/modules/ng-alert/ng-alert.component.ts b/src/app/modules/ng-alert/ng-alert.component.ts index 4d652ee..65992fd 100644 --- a/src/app/modules/ng-alert/ng-alert.component.ts +++ b/src/app/modules/ng-alert/ng-alert.component.ts @@ -2,20 +2,20 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; export enum MessageType { success = 'success', - error = 'error', - info = 'info', - warning = 'warning' + error = 'error', + info = 'info', + warning = 'warning' } export interface IMessage { type: MessageType; message: string; title?: string; - buttons?: Array<{ - label: string, - action?: Function, - css?: string - }>; + buttons?: Array<{ + label: string, + action?: Function, + css?: string + }>; } export enum CloseType {