Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create the common notification with ngx-bootstrap like toaster notification

I am new to angular 2& 4. I want to create the custom notification with ngx-bootstrap alerts and modal. I have searched and got some sample. But those are not simple. I just need a simple blueprint for create the notification with service,interface and component.

Please any one guide me with sample code.

like image 257
Kevin - Dhinesh babu Avatar asked Jul 19 '17 06:07

Kevin - Dhinesh babu


People also ask

What is toast message in Angular?

The Angular Toast is a small, nonblocking notification pop-up. A toast is shown to users with readable message content at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time-out) with different animation effects.

Is Ngx bootstrap is responsive?

Angular ngx bootstrap is a bootstrap framework used with angular to create components with great styling and this framework is very easy to use and is used to make responsive websites.


1 Answers

Official Documentation for ngx-bootstrap - Alerts.
Official Documentation for ngx-bootstrap - Modals.
API documentation and usage scenarios available there with practical examples.


For quick reference, I'll give you the code for a simple Alert box - Usage and demo below:

First things first, Import the ngx-bootstrap in your Root module using:

import { AlertModule } from 'ngx-bootstrap';

@NgModule({
  imports: [AlertModule.forRoot(),...]
})
export class AppModule(){}

Here goes HTML part template:

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

Code for Component given below:

import { Component } from '@angular/core';

@Component({
  selector: 'demo-alert-basic',
  templateUrl: './basic.html'
})
export class DemoAlertBasicComponent {}
like image 188
Manubhargav Avatar answered Oct 18 '22 04:10

Manubhargav