Angular 8 + Bootstrap 4.3.1 | Adding Toasts in Angular App using ng-bootstrap Tutorial

In this article, we will discuss how to add Toast messages/ notification in Angular application using Bootstrap components.

Bootstrap is loved by developers for their already built tried and tested UI components, which not only fasten the development tasks but also meet industrial standards.

Let’s start with a new Angular project.

Run following NPM command to create a new Angular project using Ng CLI tool.

 

After successfully creating the project, run following NPM command to install the ng-bootstrap package in Angular project.

 

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

 

Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file

Adding Bootstrap Toasts

Adding a Bootstrap component is a bit tricky, as it is just provided as a DOM component which creates a Toast/ Notification like element. But we need to create our own service to show or hide Toasts messages in our Angular application.

To show a Toast we use NgbToast directive as shown below:

Now we will create a Toast component with service to control its behavior.

Create a Toast Service

For the application, we will maintain an array toasts of Toast notification, in our toast service we will push new Toast messages in that array with their corresponding configuration:

Create the toast service in _services folder by running following npm command:

After creating the service, replace below code in the _services/toast.service.ts file:

 

Toast Component

To show toast notification, we will create a toast component, which will have ngb-toast directive to traverse over notifications from service toast array.

Run the following command to create a toast component:

After creating toast.component.ts file, replace it with below code:

The ngb-toast component directive is having *ngFor to traverse messages pushed in toasts array.

The isTemplate method is checking if toast content is a custom template of string using instanceof. We have *ngIf else templates to show content respectively.

There are option properties which we used above:

Properties:

autohide: Auto-hide the toast after a delay in ms. default: true

delay: Delay after which the toast will hide (ms). default: 500 (ms)

header: Text to be used as toast’s header.

Methods:

hide: An event fired immediately when toast’s hide() method has been called. It can only occur when autohide timeout fires or user clicks on a closing cross.

How to use Toast service and component?

Now we have Toast service and component ready to be used in Angular application. Here we will try to use it from App Component.

Open app.component.html file then add the following template somewhere after router-outlet :

As we added this at application root, so Toast messages will be easily shown over any component’s view.

In app.component.ts file, we will import ToastService and use its show method by passing strings or templates.

To call these methods and add the toast template, update following code in app component template:

That’s it now you can test these notification toast messages in the browser.

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of