2.0.3 • Published 6 years ago
angular-alert-module v2.0.3
angular-alert-module
Installation
To install this library, run:
$ 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:
$ npm install angular-alert-module
and then from your Angular AppModule
:
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:
<!-- You can now use your library component in app.component.html -->
<h1>
{{title}}
</h1>
<app-alerts></app-alerts>
Add this code in any of the component which needs to show alert
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
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');
}
/* Specific css for <Alert Type> */
.alertsContainer .alertsRow.<Alert Type> {
border: 1px solid #ffc549;
}
.alertsContainer .alertsRow.<Alert Type> .iconpanel {
background:#ffc549;
color: #fff;
}
.alertsContainer .alertsRow.<Alert Type> .messagepanel {
color: #000;
background: #fff;
}
.alertsContainer .alertsRow.<Alert Type> .closeicon {
color: #000;
}
.alertsContainer .alertsRow.<Alert Type> .closeicon a {
color: #000;
text-decoration: none;
font-size: 12px;
}
/* Specific css for <Alert Type> */
Development
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
License
MIT © sudhakar pilavadi