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

    2.1.0 • Public • Published


    Travis npm semantic-release

    This is a simple alert component, to help show different level of alerts and easy configurations on how you want it to act. Also, supports confirmation alert. Oh yea! easy to style to follow your own feel.

    Error Message Info Message Warning Message Success  Message Confirm  Message


    npm install --save @theo4u/ng-alert

    For Angular 5 and below use

    npm install --save @theo4u/ng-alert@1.6.0

    Then open open up your styles.css and add this line (for easy customization, don't forget to send a PR for nice UIs, so other peeps can use it :winks:)

    @import "../node_modules/@theo4u/ng-alert/style.css";

    Update your app.module.ts imports array

    import { NgAlertModule } from '@theo4u/ng-alert';
    imports: [




    <ng-alert [(message)]="message" [dismissable]="true"></ng-alert>
    • message: is a two bounded attribute which takes in IMessage
            export interface IMessage {
            type: MessageType,
            message: string,
            title?: string,
            buttons?: Array<{
              label: string,
              action?: Function,
              css?: string
      type can be MessageType.info, MessageType.success, MessageType.error or MessageType.warning
    • dismissable: is an optional field to allow users to close the alert or not. boolean. Defaults to
    • closeType: is used to determine which type of close button should be place on it, and only accepts CloseType enum. Defaults to CloseType.TIMES
        export enum CloseType {
    // usage
    // NORMAL -> the close button is beneath the alert message
    // TIMES -> the close button is by the far right with x
    <ng-alert [(message)]="message" [dismissable]="true" [closeType]="closeTypes.NORMAL"></ng-alert>

    App Level Alert

    You can decide to make use of the NgAlertService to push new messages, useful if you want to maintain a central point of alerting your users of anything, like at the top of your page.

      ngOnInit() { // this should be place in the location where you the ngAlert component markup is called
        this._alertSub = this._ngAlert.getSource().subscribe(message => {
          this.message = message;

    From any location withing your app, just push the new messages with NgAlertService.push(IMessage); after adding it to your constructor.

    NB: any of the following above can be imported like below

    import { NgAlertService, IMessage, MessageType, CloseType  } from '@theo4u/ng-alert';

    Confirmation Alert

    It can also serve as a confirmation alert, if buttons properties of IMessage is passed in, which is an array

    • label: the text to show for your button
    • action: the action to perform when the button is clicked
    • css: your custom css to pass in, since its just a plain <button></button>

    Example Usage

    Check app.component.ts


    Check CONTRIBUTING.md. npm start instead of ng serve so you easily watch for scss changes while playing with the scss files. Makes use of

    Further help

    To get more help on the Angular CLI use ng help or go check out the Angular CLI README.




    npm i @theo4u/ng-alert

    DownloadsWeekly Downloads






    Unpacked Size

    187 kB

    Total Files


    Last publish


    • theo4u