angular-alert-module

Installation

To install this library, run:

``bash
$ npm install angular-alert-module --save
`

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

`bash
$ npm install angular-alert-module
`

and then from your Angular AppModule:

`typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { AlertsModule } from 'angular-alert-module';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,

// Specify your library as an import
AlertsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

Once your library is imported, you can use its components, directives and pipes in your Angular application:

`xml




{{title}}




`

Add this code in any of the component which needs to show alert

`typescript
import { AlertsService } from 'angular-alert-module';

//and add a line in constructor to get services instance

constructor(private alerts: AlertsService) { }

//then use it like this - I've made it for ngOnInit and you can use it anywhere in component
ngOnInit() {
this.alerts.setMessage('All the fields are required','error');
this.alerts.setMessage('Configurations saved successfully!','success');
this.alerts.setMessage('Please save all the changes before closing','warn');
}
`

To alter alert timings and add more alert types

`typescript
import { AlertsService } from 'angular-alert-module';

//get the alert service instance in constructor
constructor(private alerts: AlertsService) { }

ngOnInit() {
// Add the delay after which alert hides out
// 0 - It won't hide at all
// number greater than 0 will hide it after the mentioned seconds

this.alerts.setDefaults('timeout',0);

//Set the icon for the alert type
/*
type - Alert Type ( warn )
icon - Setting Type
value - Value of Google Icon font ( https://material.io/icons/ )
*/
this.alerts.setConfig('warn','icon','warning');
}
`


`css
/ Specific css for /
.alertsContainer .alertsRow. {
border: 1px solid #ffc549;
}
.alertsContainer .alertsRow. .iconpanel {
background:#ffc549;
color: #fff;
}
.alertsContainer .alertsRow. .messagepanel {
color: #000;
background: #fff;
}
.alertsContainer .alertsRow. .closeicon {
color: #000;
}
.alertsContainer .alertsRow. .closeicon a {
color: #000;
text-decoration: none;
font-size: 12px;
}
/ Specific css for /
`

Development

To generate all .js, .d.ts and *.metadata.json files:

`bash
$ npm run build
`

To lint all *.ts files:

`bash
$ npm run lint
``

License

MIT © sudhakar pilavadi