https://github.com/sibiraj-s/angularjs-toast

🍻 A Simple toast notification service for AngularJS pages
https://github.com/sibiraj-s/angularjs-toast

angularjs angularjs-toast toast-notifications

Last synced: about 2 months ago
JSON representation

🍻 A Simple toast notification service for AngularJS pages

• Host: GitHub
• URL: https://github.com/sibiraj-s/angularjs-toast
• Owner: sibiraj-s
• License: mit
• Archived: true
• Created: 2018-07-17T09:13:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-22T16:38:35.000Z (almost 2 years ago)
• Last Synced: 2024-09-19T13:02:59.991Z (about 2 months ago)
• Topics: angularjs, angularjs-toast, toast-notifications
• Language: JavaScript
• Homepage: https://sibiraj-s.github.io/angularjs-toast/
• Size: 3.37 MB
• Stars: 7
• Watchers: 3
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# angularjs-toast [![NPM Version](https://img.shields.io/npm/v/angularjs-toast.svg)](https://www.npmjs.com/package/angularjs-toast) [![Tests](https://github.com/sibiraj-s/angularjs-toast/workflows/Tests/badge.svg)](https://github.com/sibiraj-s/angularjs-toast/actions) [![Jsdelivr](https://data.jsdelivr.com/v1/package/npm/angularjs-toast/badge?style=rounded)](https://www.jsdelivr.com/package/npm/angularjs-toast)

angularjs-toast is a simple service for creating toast notification for AngularJS pages

Live demo [here][demo]

## Getting Started

### Installation

You can directly clone/download [here][angularjs-toast]

```bash

git clone [email protected]:sibiraj-s/angularjs-toast.git

```

or use cdn

**Minified:**

```bash

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.js

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.min.css

```

**Pretty Printed:**

```bash

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.js

//cdn.jsdelivr.net/npm/angularjs-toast@latest/angularjs-toast.css

```

or

Install via Package managers such as [npm][npm] or [yarn][yarn]

```bash

npm install angularjs-toast --save

# or

yarn add angularjs-toast

```

### Usage

Import the modules required for angularjs-toast. It is necessary to include [ngSanitize][ngsanitize] and [ngAnimate][nganimate] for angularjs-toast to work

```html

<-- styles -->

<-- scripts -->

```

add `angularjsToast` dependency to the module

```js

const app = angular.module('myApp', ['angularjsToast']);

```

and in your controller

```js

const toastController = toast => {

  toast.create('Hello World!');

};

toastController.$inject = ['toast'];

app.controller('toastController', toastController);

```

then in HTML

```html

```

### Options

```js

toast.create({

  timeout: 5 * 1000,

  message: 'Hi there!',

  className: 'alert-success',

  dismissible: true

});

```

| Property    | Type                  | Default       | Description                                             |

| ----------- | --------------------- | ------------- | ------------------------------------------------------- |

| className   | string                | alert-success | accepted values are alert-(success/danger/primary/info) |

| timeout     | number                | 5000          | timeout for each toast messages to disappear            |

| message     | html-string or string | Hi there!     | can be HTML or plain string                             |

| dismissible | boolean               | true          | show / hide the close icon.                             |

### Configure globally

```js

const config = toastProvider => {

  toastProvider.configure({

    maxToast: 4,

    timeout: 5 * 1000,

    containerClass: 'toast-wrapper',

    defaultToastClass: 'alert-success',

    dismissible: true,

    insertFromTop: true,

    position: 'right'

  });

};

config.$inject = ['toastProvider'];

app.config(config);

```

| Property          | Type    | Default | Description                                                                                         |

| ----------------- | ------- | ------- | --------------------------------------------------------------------------------------------------- |

| maxToast          | number  | 7       | maximum number of toast messages to show. if max reached the element inserted first will be removed |

| timeout           | number  | 5000    | timeout for each toast messages to disappear                                                        |

| containerClass    | string  | "       | adds class to the container for more flexibility in styling                                         |

| defaultToastClass | string  | "       | adds class to the container for more flexibility in styling                                         |

| dismissible       | boolean | true    | show / hide the close icon.                                                                         |

| insertFromTop     | boolean | false   | setting true will insert new messages on top else inserts at bottom                                 |

| position          | string  | right   | position of the element can be 'left', 'center' and 'right'                                         |

### Animations

Default `fadeIn-fadeOut` animation can be overwriten

```scss

.angularjs-toast {

  &.ng-enter {

    opacity: 0;

    transition: 0.5s ease-in;

    &.ng-enter-active {

      opacity: 1;

    }

  }

  &.ng-leave {

    opacity: 1;

    transition: 0.2s ease-in;

    &.ng-leave-active {

      opacity: 0;

    }

  }

}

```

[nganimate]: https://docs.angularjs.org/api/ngAnimate

[ngsanitize]: https://docs.angularjs.org/api/ngSanitize

[npm]: https://www.npmjs.com/

[yarn]: https://yarnpkg.com/lang/en/

[github]: https://sibiraj-s.github.io/

[ngx-notifier]: https://github.com/sibiraj-s/ngx-notifier

[angularjs-toast]: https://github.com/sibiraj-s/angularjs-toast

[demo]: https://sibiraj-s.github.io/angularjs-toast/