https://github.com/ojji/ng-semantic-toast

Angular toast notification module built with Semantic UI.
https://github.com/ojji/ng-semantic-toast

angular semantic-ui toast-notifications

Last synced: 3 months ago
JSON representation

Angular toast notification module built with Semantic UI.

• Host: GitHub
• URL: https://github.com/ojji/ng-semantic-toast
• Owner: ojji
• License: mit
• Created: 2017-11-03T08:09:43.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-14T10:10:52.000Z (almost 7 years ago)
• Last Synced: 2024-04-24T05:22:23.276Z (7 months ago)
• Topics: angular, semantic-ui, toast-notifications
• Language: TypeScript
• Homepage:
• Size: 452 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular-components - ng-semantic-toast - Angular toast notification module built with Semantic UI. (UI Components / Notification)

README

        


  

    

  





  Angular + Semantic UI Toast module



Angular toast notification module built with Semantic UI.

## Dependencies

* npm > 5.5.1 to install from GitHub.

* ng2-semantic-ui > 0.9.6

* angular > 4.3.1

## Installation

* To install this library, you need to install from GitHub.

``$ npm install git+https://github.com/ojji/ng-semantic-toast.git --save``

* You need to include the Semantic UI stylesheet in your ``index.html`` file.

```html

```

* Import the toast module in your application module, and add the toast service to the providers.

```typescript

import { SuiToastModule } from 'ng-semantic-toast';

@NgModule({

    declarations: [AppComponent, ...],

    imports: [SuiToastModule],

    providers: [SuiToastService],

    bootstrap: [AppComponent]

})

export class AppModule {}

```

Now you are good to go!

## Usage

To add a new toast, you have to call the toast service's ``addToast(toast: SuiToast)`` method.

There are 2 types of toasts supported at the moment - both extending the ```SuiToast``` abstract class:

* ```SuiMessageToast``` - these are simple toasts based on the Semantic UI message component, capable to display simple notifications to the user

* ```SuiCustomTemplateToast``` - these are customisable toasts which need custom templates supplied and a data context to operate on, allowing to create more complex notifications to display to the user

Both classes are customizable with properties in the ```IToastOptions``` interface.