ir-alert

Angular 6 alert component

Usage

1. Install from npm:

npm install ir-alert --save

2. Import IrAlertModule to app.module.ts:

import { IrAlertModule } from 'ir-alert';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        IrAlertModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

3. Import IrAlertService to component that you want to use the alert:

import { IrAlertService } from 'ir-alert';

4. Use the alert service:

constructor(public alert: IrAlertService) {
    this.alert.showAlert({
        title: 'IrAlert',
        message: 'Hello World!'
    });
}

Parameters

Param	Type
config	IrAlertConfig
buttons	IrAlertButton[]
inputs	IrAlertInput[]

IrAlertConfig

You can use MatDialogConfig for IrAlertConfig with these two extra configs:

Config	Type
title	String
message?	String

IrAlertButton

Attribute	Type
text	String
handler?	Function

sample:

[
    {
        text: 'Yes',
        handler: () => {
            console.log('You pressed "Yes"');
        }
    },
    {
        text: 'No',
        handler: () => {
            console.log('You pressed "No"');
        }
    }
]

IrAlertInput

Attribute	Type
type	String - 'text', 'number', 'tel' , 'password', 'textarea', 'radio', 'checkbox', 'h1', 'h2', 'h3', 'h3', 'h4', 'h5'
name	String
value?	String
placeholder?	String
label?	String - require if type is radio or checkbox
multiLine?	Boolean - show radio or checkbox in multiline or inline
rows?	Number - number of rows in textarea
group?	IrAlertRadioGroup[] - require if type is radio

IrAlertRadioGroup:

Attribute	Type
value	String
label	String

Sample

constructor(public alert: IrAlertService) {
    this.alert.showAlert({
        title: 'IrAlert',
        message: 'Hello World!'
    }, [
        {
            text: 'Yes',
            handler: (values) => {
                console.log(values);
            }
        },
        {
            text: 'No',
            handler: () => {
                console.log('You pressed "No"');
            }
        }
    ], [
        {
            type: 'text',
            name: 'name',
            placeholder: 'Name'
        },
        {
            type: 'text',
            name: 'lastname',
            placeholder: 'LastName'
        }
    ]);
}