Up next in 10
Angular ngx-dialogs Example to Display Data & Image Popup Modals & Dialogs in Browser Using TS
Jan 30, 2025
Get the full source code of application here:
https://codingshiksha.com/angular/angular-ngx-dialogs-example-to-display-data-image-popup-modals-dialogs-in-browser-using-ts/
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you a
0:04
angular package which allows you to show
0:06
these awesome looking dialog model
0:09
windows inside your application so it
0:12
can contain text images as well so you
0:14
can even show images as well so this is
0:18
actually the package it also contains
0:20
these buttons as well yes or cancel
0:22
button so you can have multiple buttons
0:25
inside these model Windows dialog box
0:27
windows so it's a very good package
0:30
which allows you to show these
0:32
windows so you can see this is a simple
0:35
alert window which actually contains
0:37
some text sample text and also the imag
0:41
is also there you can even show images
0:44
as well so the name of the package is if
0:47
you go to npmjs.com and just search for
0:50
this package which is
0:52
nx- dialogues so this is actually the
0:55
package name uh the command is very
0:58
simple this is actually the command so I
1:01
have written a simple step by-step blog
1:04
post on my website alongside with the
1:06
full source code that I used in this
1:07
video so you can go to the description
1:09
to get all the source code so now I will
1:12
start from scratch the very first step
1:15
we need to do we need to add this import
1:17
statement right inside your app. module.
1:21
typescript file of your angular project
1:24
so right here we just need to add this
1:25
import statement so we simply say import
1:29
ngx
1:30
dialoges module which will be coming
1:33
from this package NG dialoges so we
1:36
simply import this and then we import
1:39
add this into the Imports array like
1:42
this so this is all the configuration
1:44
which is needed now we can directly use
1:46
it so for this we have binded these
1:49
onclick listeners so now for showing
1:52
these dialog boxes I will move to this
1:55
file app. component.ts so we have
1:58
various buttons out there if you see we
2:01
have binded this onclick listener so to
2:03
show a simple alert message we have this
2:07
simple hyperlink so when I click this
2:10
this function executes open Simple alert
2:13
so we go to this function and now let me
2:16
show you what this how to show a simple
2:19
alert window using this package so this
2:21
actually contains we are at the top you
2:24
can see we are importing this NG ngx
2:26
alert which is coming from this ngx
2:29
dialog
2:30
so using this we actually this will this
2:36
start simple alert and it actually
2:38
contains a create function and right
2:41
here it actually passes a title property
2:44
so this actually holds the title of the
2:46
dialogue box so simple dialogue and also
2:50
it holds a message as well so whatever
2:52
message you can show here it is a simple
2:55
Aller dialogue so now what happens as I
2:58
click this window you will see this this
3:00
is your title of the window and this is
3:03
a simple message so you can customize it
3:07
accordingly so you can change it
3:09
accordingly so this is actually the
3:11
method create method it actually takes
3:14
an object which contains these two
3:16
properties now we can even show images
3:20
as well a little bit uh more advanced
3:24
example will be let me just show you you
3:27
can even pass custom CSS as as well so
3:30
this
3:31
dot if you want to show confirm alert we
3:34
simply say confirm alert dot
3:38
create and inside this dialogue box we
3:44
will once again have the title we will
3:46
once again have the actual message that
3:49
you want to display but here also we
3:51
also have the
3:54
confirm Button as well so there will be
3:57
a confirm button so when you click that
4:00
you will simply say you click yes so now
4:04
what happens if I show you so now we
4:09
have this yes or cancel button as well
4:12
so this is coming because of this
4:14
function confirm so as I click the yes
4:17
button you will see you click yes so it
4:20
is this call back function is executing
4:22
and then it is saying you click yes so
4:24
he can even show buttons as well and
4:28
similarly you can have custom buttons as
4:31
well okay yes no so right here we are
4:34
providing that buttons array each button
4:36
is having some property such as title
4:38
class and an
4:40
event and lastly we can even show images
4:43
as well so this contains a light box
4:46
dialog config create and where we are
4:48
passing the source here this. image.
4:51
large so now what happens if you click
4:54
on this image this image will open in a
4:57
light box dialog box so all this is
5:00
supported guys ngx dialogs this is
5:03
actually the name of the package you can
5:05
directly install it all the example code
5:08
I've given in the description of the
5:09
video you can read my detail step
5:11
by-step blog post and also get the full
5:13
example code so thank you very much guys
5:16
for watching this video and also check
5:18
out my website as well free mediat
5:20
tools.com uh which contains the
5:22
thousands of tools regarding audio video
5:24
and image and I will be seeing you guys
5:27
in the next video
#Software
#Online Communities