Up next in 10
Angular ngx-toastr Library Example to Show Toast Notification Messages in Browser Using TypeScript
Jun 9, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:02
uh hello guys uh welcome to this live
0:04
stream so in this live stream I will
0:06
show you a angular module for showing
0:08
toast notification messages right inside
0:11
your application something like this we
0:13
have four messages success we also have
0:16
the error call back message similarly we
0:20
also have the info one which appears in
0:22
blue color if you want to show some info
0:25
m message lastly the warning message
0:27
will appear in yellow so these are four
0:30
set of messages which will be required
0:32
by your application at various moment of
0:35
time so this is a great
0:37
module to integrate the toast
0:39
notification messages so if you just
0:41
search on Google
0:43
ngx toaster
0:46
npmgs so this is essentially this
0:48
package here ngx
0:50
toaster the command is simple npm ngx to
0:55
to install this so I will show you a
0:58
very simple pack uh in example so you
1:01
can even go to their website and play
1:04
with this we have various positions top
1:06
right bottom right bottom left all that
1:10
success info warning error you can go to
1:12
this website and try
1:14
this and play with
1:17
this so I will show you very simple
1:20
example so first of all you need to go
1:23
to this file which is app.module.ts ts
1:27
of your angular project and then you
1:28
need to register this module for
1:31
registering it is very it is very easy
1:34
you simply write the import line import
1:37
toaster module and it will be coming
1:41
from this package which is ngx toaster
1:44
and then you simply go to the imports
1:47
and
1:48
just include this module toaster module
1:51
for root that's all so now close this
1:57
file and then we will start from scratch
2:00
let me delete everything so here you
2:03
need to go to the app dot component.html
2:07
file this will your template file of
2:10
your angular project and here you'll
2:12
define four
2:15
buttons so you'll define four buttons
2:18
first if button for showing the success
2:22
error info warning so we binded four
2:24
call back functions on click so now we
2:27
need to define all these four functions
2:29
in our
2:30
app.component.ts file so let me move to
2:33
this file and here you need to first of
2:35
all import this toaster service import
2:39
toaster service from ngx toaster after
2:43
that you simply need to pass this
2:45
service in the constructor like this
2:48
declare a variable public toaster of the
2:51
type toaster
2:54
service and that's all so after passing
2:58
it to the constructor now we can define
3:00
all these four functions so the first
3:02
function is the show success the next
3:05
one is for show
3:08
error and then for show
3:14
info and then we have show warning so we
3:19
have all these four functions so now for
3:22
displaying the toast notification
3:24
message we simply call this service it
3:26
contains this function success and here
3:29
it takes whatever message that you want
3:32
to display okay so I will say hello
3:34
world I am
3:37
message and then you need to
3:40
display the if it's a error
3:44
or you can display anything the title
3:49
and then we have various options that
3:52
you can pass here which is how much time
3:53
it displays so I will say displays for 3
3:57
seconds so we are passing here 3,00
4:00
millisecond this is your message that
4:02
you want to display then the title and
4:04
how much time which is the time out so
4:06
if I click this button it displays the
4:08
message for 3 seconds and then it
4:12
vanishes so you can see that so now you
4:15
can repeat
4:16
this so the default location is the top
4:20
right position you can even change the
4:22
position as well i think you can put the
4:25
position attribute position class so if
4:29
you want to display it let's suppose top
4:33
left I think it will display in the top
4:36
left here you can
4:37
see now it is displaying top left so you
4:40
can change any
4:41
position and uh
4:45
similarly we have
4:49
this the function for showing the error
4:52
message we have the error right
4:56
here so now it displays the red color we
5:00
also displays these icons that you can
5:02
see right here the success icon the
5:04
error icon and similarly we also have
5:07
the
5:09
info function so if you want to display
5:11
a
5:14
info this and lastly we have the method
5:18
to display a
5:20
warning so all these four toast types
5:24
are there error info success so
5:26
depending upon you can integrate this
5:28
module very easily inside your angular
5:32
application ngx toaster so thank you
5:36
very much guys for watching this video
5:38
and please hit that like button
5:40
subscribe the channel and also check out
5:42
my website
5:44
freemediattools.com which contains
5:46
unlimited number of tools regarding
5:48
audio video and image and I will be
5:51
seeing you in the next live stream