How to create a generic notification using ngx-bootstrap, e.g. toaster notification

Question

I'm new to angular 2 & 4. I want to create a custom notification with ngx-bootstrap and modal alerts. I searched and got a sample. But it is not easy. I just need a simple project to create a notification with a service, interface and component.

Please, any of us will help me with a sample code.

Answer 1

The official documentation for ngx-bootstrap is Alerts .
The official documentation for ngx-bootstrap is Modals .
API documentation and usage scenarios available there with practical examples.

---

For quick reference, I will give you the code for a simple alert window - Use and demo below:

First of all, import ngx-bootstrap into your root module using:

 import { AlertModule } from 'ngx-bootstrap'; @NgModule({ imports: [AlertModule.forRoot(),...] }) export class AppModule(){} 

---

Here is the part of the HTML template :

 <alert type="success"> <strong>Well done!</strong> You successfully read this important alert message. </alert> 

---

The code for Component listed below:

 import { Component } from '@angular/core'; @Component({ selector: 'demo-alert-basic', templateUrl: './basic.html' }) export class DemoAlertBasicComponent {} 

Answer 2

How to create a generic notification with ngx-bootstrap notification, e.g. toaster

Angular 2 The Finish component displays warnings and messages for the grunt style for your application.
Online demo here .

---

• Just install it like any other npm package:
  npm install ng2-toasty --save

• If you use SystemJS to download files, update the configuration file:

  System.config({ map: { 'ng2-toasty': 'node_modules/ng2-toasty/bundles/index.umd.js' } });

Answer 3

You can use Angular2 Toasty

Angular2 Toasty component displays warnings and grunt style messages for your application.

npm install ng2-toasty --save

To learn how to use it, refer to https://github.com/akserg/ng2-toasty/blob/master/README.md

Find a demo here https://akserg.imtqy.com/ng2-toasty/

If you are using the Ionic Framework , you can use the Ionic ToastController

Answer 4

You can use this: - ng2-toastr .

This is a very simple toaster showing success, error, warning, information and a custom toaster. Please check this toaster. Hope this toaster meets your requirement.

Github link: - ng2-toastr

It is compatible with angular2 and 4 versions.

Answer 5

Use the ng2 notifications it provides for push and toast notifications, here is the github link you can get.

npm install ng2 notifications --save

https://github.com/alexcastillo/ng2-notifications