angular-alert-module

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