angular-alert-module

## Installation

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-alert-module
2.0.34 years ago5 years agoMinified + gzip package size for angular-alert-module in KB

Readme

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