Angular 14 Project to Show List Data in Material Dialog Popup Window on Button Click in TypeScript
Dec 22, 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/
Show More Show Less View Video Transcript
0:07
Uh hello friends. Today in this tutorial
0:09
I'll be showing you that how to uh show
0:14
pop-up window inside your angular 14
0:17
application and display some data inside
0:20
it. So basically there is angular
0:23
material kind of library inside angular
0:27
application. So basically this is a demo
0:29
of the application. You can see here if
0:31
I basically hit this button here this
0:35
popup uh material dialogue box will be
0:39
appearing here. You can uh also show
0:43
here full screen. You can see this is
0:45
the full screen dialogue window and it
0:47
contains some data inside it. This is a
0:49
list data. It is showing here list item.
0:53
So this is a first list item, second
0:55
list item.
0:57
So it's unordered list and there is also
1:00
a button to close this uh material
1:03
pop-up window. So basically if I close
1:05
this window the window
1:09
uh goes away. So this is a simple
1:12
application we will be building in this
1:14
tutorial where we will be showing this
1:17
popup window inside Angular 14
1:20
application.
1:23
So we will be making use of angular
1:25
material library.
1:27
So you can see that.
1:30
So for this I have written a complete
1:33
blog post on my tutorial website. So you
1:35
can see this is the material dialogue
1:37
box which contains some unordered list
1:40
data. So if you want to get all the
1:43
source code you can go to the
1:44
description of this live stream. So
1:46
step-by-step instruction is given. So
1:49
how to build this? You can also position
1:52
this uh dialogue box anywhere on the
1:54
screen by using X and Y coordinate. So
1:58
this is the application we will be
1:59
building. So let's start building it. So
2:02
let me delete all this source code and
2:04
start from scratch.
2:10
So the very first thing you will do guys
2:12
is you need to install this uh
2:14
dependency which is angular material.
2:18
Let me delete this all this source code.
2:21
So after you make your angular project
2:24
there is a command here which you need
2:26
to execute. I have given this command
2:30
here in the description of the live
2:31
stream. So basically you will see here
2:35
this is a command which is ng add the
2:39
rate angular/material.
2:41
So basically just execute this command
2:43
here and uh this will ask some questions
2:47
to you. Basically you need to choose a
2:51
theme here. I have choosed indigo pink
2:53
here and then it will say setup global
2:56
angular material typography style. So
2:59
for this you will say no.
3:01
So setup brow browser animation. So you
3:04
will say yes. So now basically this will
3:06
install the packages and all the
3:09
packages are installed. So after this
3:11
you will go to your app.module.ts
3:14
file and here you will just uh import
3:17
the dependency which is uh one line you
3:20
need to write here material dialogue
3:26
module. So matt dialog module so
3:30
basically this will be coming from
3:32
angular/material.
3:35
So here you just need to material/
3:39
dialogue
3:41
and then you need to add this inside
3:43
your imports array. So you will say matt
3:45
dialog module. So this is the only thing
3:48
that you need to do inside your app
3:49
domodule.ts file. So just close this
3:52
file and now you need to write inside
3:54
app do.component html file. So now to
3:58
start your application just write
4:00
ngsurf. So this will start the angular
4:02
14 application. So right here guys we
4:05
will have a simple button. So the button
4:08
will be simply open model window.
4:13
So basically whenever we click this
4:15
button.
4:18
So this will be a matt button.
4:24
And so whenever we click this we will be
4:28
opening a method which will be open temp
4:32
dialogue.
4:34
This is a method we will call.
4:38
So for the template of the dialogue box
4:42
we will have ng template.
4:47
So we will give it a reference to it so
4:49
that we can target an typescript which
4:52
is dialog ref
4:55
and then we also need to show some data.
4:57
So here we will say let my data.
5:00
So this is the name of the data that we
5:02
will be showing. So inside this we will
5:04
have H5 tag. So we will simply give it a
5:08
heading I am template dialogue
5:11
following list. So here we will be
5:14
showing unordered list. So we will make
5:17
use of this ng if directive
5:21
my data. So if this my data is set then
5:25
only we will show
5:28
LI tag. So here we will loop through by
5:32
using ng4.
5:36
So we will loop through let item of my
5:38
data
5:40
and we will uh show this item here like
5:44
this
5:46
and also we will be having a simple
5:49
button after this unordered list to
5:51
close the pop-up windows. So
5:55
basically Matt button
5:58
Matt dialogue
6:01
close.
6:04
So basically the label will be simply
6:07
close. So when you click this button the
6:09
dialogue box will be closed. I am from
6:14
dialogue land.
6:18
So now if you see here there will be an
6:21
error. It is saying that open temp
6:23
dialogue doesn't is not defined. So we
6:25
need to define this function. So just go
6:27
to app do.component.ts file. So here you
6:30
need to define this function.
6:32
So here
6:35
inside this you will need to define
6:37
this. So open temp dialogue.
6:41
So inside this function guys
6:45
but before that we also need to get the
6:47
reference. So here
6:50
we will use view child
6:53
and here we will need to give the
6:55
reference that we have given inside app
6:57
do.component html file. So if you check
7:01
here we have given this reference which
7:03
is uh uh this reference here dialograph.
7:06
So we are simply copy pasting this
7:08
reference here like this
7:11
and then dialog ref
7:17
and we will say template ref to any like
7:21
this. So this is imported here at the
7:24
very top here you will see
7:25
automatically.
7:28
So now we we need to uh just uh have the
7:32
list of data that will be displayed. So
7:35
this is an simple array.
7:39
So which will contain list of items.
7:47
So we will have four items here in this
7:50
array which will be displayed in the
7:52
dialogue box. So then guys we will have
7:55
this constructor
7:58
public dialogue
8:01
which will be of the type matt dialogue.
8:05
So if you see here it will be
8:07
automatically imported here from this
8:09
add the rate angular/material/
8:11
dialogue.
8:13
So after this what we need to do is that
8:16
we also need to write this implement on
8:20
in it.
8:21
So this will implement this uh template
8:25
uh sorry
8:26
interface.
8:28
So inside this interface
8:32
we need to initialize our from dialogue.
8:36
So here we need to declare this at the
8:38
very top these two variables
8:41
from
8:44
dialogue.
8:45
This will be of the type string.
8:49
So here you need to uh initialize this.
8:51
So this dot from dialogue will be equal
8:54
to
8:59
like this. So just initialize this.
9:03
So now we can simply open this. So if
9:06
you see here if I refresh here localhost
9:09
4200.
9:15
So it is saying that
9:17
open temp dialogue.
9:24
Let me see what is
9:30
open temp dialogue.
9:48
Angular material
9:54
open temp dialogue.
9:57
We have
10:02
so when we click this button you will
10:03
see that we are calling this function
10:05
which is open temp dialogue.
10:09
[snorts] So let me just
10:13
Copy this once again. This can be
10:15
writing mistake.
10:25
So now you can see it is compiled
10:27
successfully. So basically if you check
10:29
here we have a simple got a simple
10:31
button out there. If I click it nothing
10:33
happens because we haven't written this
10:35
code. So we now need to show a dialogue
10:38
window material dialogue window.
10:41
[snorts] So inside this we will make a
10:44
variable my comp dialogue. So here we
10:49
will use this dot dialogue dot open
10:51
method and this dot dialogue ref we will
10:54
pass as a reference and the second
10:57
parameter will be the data that needs to
10:59
be shown.
11:01
So data will be coming here our list
11:04
data which is this dot my full list. You
11:08
will see that this is the data that we
11:11
need to show which contains four items.
11:14
And lastly what we need to do is that we
11:16
need to
11:19
after this we need to simply
11:24
have the different kinds of events. If I
11:27
just refresh it now, you will now see
11:30
this pop-up window will appear. This uh
11:33
dialogue box, this is a material
11:35
dialogue box which contains these four
11:38
items, first, second, third and fourth.
11:41
And there is also this close button. If
11:43
you close this, the pop-up window
11:46
closes. So this is a simple dialogue box
11:49
that we have materialized in Angular 14
11:52
with this open method. And now basically
11:55
you can play with this. You can also
11:57
make it full screen. There is a
11:59
different option out there. What you can
12:01
do after this put a comma and there is
12:04
also a option to make it full screen.
12:08
So there is a option here which is panel
12:12
class. So here you can give it a class
12:15
to it of uh
12:18
full screen. So there is a class full
12:21
screen dialogue
12:24
full screen
12:26
dialogue.
12:30
So now if you refresh it.
12:32
So we need to make slight changes here.
12:35
After this we need to also
12:38
put a height of
12:42
100 view height
12:46
height of
12:49
100 VH
12:52
and also
12:55
width we need to initialize to 100%.
13:04
So after doing this guys what we need to
13:06
do is that we also need to go to app dot
13:09
component uh css file and here you need
13:12
to give this style to it just uh target
13:15
this class which is full screen dialogue
13:18
and make the max width property of 100%
13:21
important. So now if you hit this it
13:24
will make full screen. So basically it
13:27
will take entire width of the browser.
13:29
So this is a full screen material
13:32
dialogue box which contains these four
13:34
items and a close button. You can even
13:37
increase the items. It totally depends
13:39
upon you whether it is coming through an
13:40
API
13:42
like this.
13:46
You can has as many items that you want
13:49
to display. It is totally up to you. Now
13:52
you can see that. So it is that easy to
13:56
make this material dialogue box with
13:59
data list data [snorts]
14:02
and also you can also place it
14:06
by using coordinates. So there is also a
14:08
property of position
14:11
and this position is an object which
14:13
takes the left position. You can specify
14:16
the left position of 50 pixel
14:20
and put a comma and the top position to
14:22
10 pixel. Similarly you can like this.
14:27
So now if you refresh it so basically it
14:30
will move through
14:32
in this position. So you can have this
14:36
80 pixel. So you can play with this
14:39
parameters positioning. You can place
14:42
your models in different kinds of
14:43
position by using you can also
14:46
manipulate this 10 to
14:49
50 pixel this uh left and the top
14:53
position.
14:55
So if you're watching it for the very
14:56
first time guys then please hit the like
14:58
button subscribe the channel as well. So
15:00
in this way you can do it and also there
15:03
are different kinds of events out there
15:05
which is uh there
15:11
which is uh after opened after the
15:15
dialogue box is opened this event will
15:17
fire before it is closed and after it is
15:20
closed. So now to check these events in
15:23
action just right click inspect element
15:25
and go to console and whenever you click
15:28
this open this you will see this event
15:30
will fire.
15:32
So whenever you close it two events will
15:35
fire before close and after close. So
15:38
this is a simple crash course on
15:40
material dialogue box in angular 14 guys
15:43
how to display data inside them. I have
15:46
shown you from scratch. So if you want
15:48
to get all the source code, go to the
15:50
description of this live stream and I
15:53
will be seeing you in the next live
15:55
stream. Until then, thank you very much.
