Neurotic and Probably Misinformed

    angular-alert-module
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    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 alertsAlertsService) { }
     
    //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 alertsAlertsService) { }
     
      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

    Install

    npm i angular-alert-module

    DownloadsWeekly Downloads

    158

    Version

    2.0.3

    License

    none

    Unpacked Size

    150 kB

    Total Files

    29

    Last publish

    Collaborators

    • sudhakarsp06