Geek Culture
Published in

Geek Culture

Simple Toast Notification in Angular

In this article, we will make our own toast notification using Angular.

Model

Our model contains information about the title, message, position, notification type.

Service

The main part of the toast service is a BehaviorSubject. Using this subscription we will be notified when we need to show Toast notification.

Toast Component

In the typescript of the toast component we just make a subscription. Also, we have an additional method to hide toast manually.

The HTML file is very simple. In this file, we have a couple of ngIf to show different icons for different notification types and we show title and message. All that information we take from the toast model.

The most interesting part is located in the CSS file. Here we define the position of toast notification.

To make our toast notification pretty we use a CSS grid approach. Our grid has two rows, three columns and four areas: icon for different notification types, title, message, close button.

If we add in each area unique color our notifications will look like this.

APP component

Inside of app component HTML we use our toast component and of course, in typescript we use the toast service to show different toast notifications.

As a result, we have a simple toast notification.

If you need to take a close look at the project here is the link.

Originally published at http://tomorrowmeannever.wordpress.com on March 26, 2022.

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yurii K

Full-stack developer. In my work, I use Angular and C#. In my free time I write articles for my blog.