Notoriously Psychedelic Modules

    @nowzoo/ngx-app-msg
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.1 • Public • Published

    @nowzoo/ngx-app-msg

    Message service and component for Angular 6 apps

    Demo Site | Demo Code

    Install

    npm i @nowzoo/ngx-app-msg --save

    Quick Start

    Import the module

    Import the module into your app, calling NgxAppMsgModule.forRoot().

    // app.module.ts...
    import { NgxAppMsgModule } from '@nowzoo/ngx-app-msg';
    // ...
    @NgModule({
      imports: [
        //...
        NgxAppMsgModule.forRoot()
      ]
    })
    export class AppModule { }

    Place the NgxAppMsgComponent in your app component

    Put <ngx-app-msg></ngx-app-msg> somewhere.

    <!-- app.component.html -->
    <router-outlet></router-outlet>
    <ngx-app-msg></ngx-app-msg>

    Use NgxAppMsgService to show messages

    import { NgxAppMsgService } from '@nowzoo/ngx-app-msg';
    //...
    export class SomeComponent {
      constructor(
        private msg: NgxAppMsgService
      ) { }
    
      show() {
        this.msg.wait('Doing something time consuming...');
        setTimeout(() => {
          this.msg.success('Done!');
        }, 2000);
      }
    
    }

    API

    Type: NgxAppMsgContext

    'wait' | 'warn' | 'success'

    Interface: INgxAppMsg

      - `context: NgxAppMsgContext`
      - `message: string`
      - `autohide: boolean`

    Component: NgxAppMsgComponent

    selector: ngx-app-msg

    Inputs

    • autohideAfter: number How long to wait, in ms, to hide success and warning messages.

    Service: NgxAppMsgService

    Properties

    • messages$: Observable<INgxAppMsg>

    Methods

    • wait(message: string)
    • warn(message: string)
    • success(message: string)

    Contributing

    Contributions and suggestions are welcome.

    Get started...

    git clone git@github.com:nowzoo/ngx.git
    cd ngx
    npm i
    ng build ngx-app-msg --prod

    The library code is found in projects/ngx-app-msg.

    The demo site code is in src/app/ngx-app-msg.

    This library was built with the Angular CLI, so...

    # test the library...
    ng test ngx-app-msg
    
    # build the library...
    ng build ngx-app-msg --prod
    
    # serve the demo site locally...
    ng serve

    Note that changes to the library code are not automatically reflected in the locally-served demo site. You must run ng build ngx-app-msg whenever you make changes to the library. But the local server does watch for changes to the built library -- so you don't need to restart the server.

    If you use Wallaby to run unit tests, select the projects/ngx-app-msg/wallaby.js as your config file.

    License

    MIT

    Install

    npm i @nowzoo/ngx-app-msg

    DownloadsWeekly Downloads

    26

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    30

    Last publish

    Collaborators

    • chriscarson