## Installation
npm install angular-alert-moduleTo install this library, run:
``bash`
$ npm install angular-alert-module --save
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.
background:#ffc549;
color: #fff;
}
.alertsContainer .alertsRow.
color: #000;
background: #fff;
}
.alertsContainer .alertsRow.
color: #000;
}
.alertsContainer .alertsRow.
color: #000;
text-decoration: none;
font-size: 12px;
}
/ Specific css for
To generate all .js, .d.ts and *.metadata.json files:
`bash`
$ npm run build
To lint all *.ts files:
`bash``
$ npm run lint
MIT © sudhakar pilavadi