Up next in 10
Build a modern Angular Material CRUD Application from scratch using Angular 19 in this step-by-step tutorial. This video is perfect for beginners and intermediate developers who want to learn how to connect the frontend with a backend using Spring Boot and Angular.
🚀 In this Angular 19 tutorial, you'll learn how to:
Set up Angular 19 with Angular Material
Create responsive UI components
Perform full CRUD (Create, Read, Update, Delete) operations
Integrate Angular with a Spring Boot REST API
🚀 Angular Material CRUD Application with Angular 19 & Spring Boot
Learn how to build a complete CRUD application using Angular Material in this hands-on Angular 19 tutorial. This step-by-step guide is perfect for beginners and intermediate developers who want to master Angular 19 features while creating a responsive UI.
In this Angular 19 CRUD tutorial, we’ll cover the full-stack development process, integrating Spring Boot on the backend and Angular 19 on the frontend. Whether you're building admin panels, dashboards, or real-time data apps, this video gives you the skills to do it right!
✅ What you’ll learn:
Angular 19 setup and key new features
Material UI integration for modern design
CRUD operations (Create, Read, Update, Delete)
Spring Boot REST API integration
Building responsive forms and tables
🔧 Technologies Used:
Angular 19, Angular Material, Spring Boot, HTML, CSS
👍 Don’t forget to Like, Share & Subscribe for more tutorials!
#angular19tutorial #angularcrudtutorial #springbootangularcrudtutorial #angularmaterial #crudapp #angular19newfeatures
Show More Show Less View Video Transcript
0:00
hi friends welcome to tutors funny channel today I'm going to teach Angular credit application step by
0:08
step uh spring boot is a back end application we are retrieving the API
0:13
from back end application from spring boot application passing to angular
0:20
material design so how to make a beautiful attractive design in angular
0:27
using material UI we will we will teach from the scratch right first I'm going
0:34
to go to install the project in my F drive so I'm going to make the
0:41
folder i just put it angular
0:47
ex folder name I put it right so now I'm going to open the command from
0:54
window okay go to the open the project type the command address for cmd open up this
1:02
one yeah I'm going to go to type it
1:08
here
1:18
angular now here click on this first thing right so I'm going to cut it so
1:26
you have to I'm going to install the angular part okay this is this is latest version of angular angular 19 so I'm
1:32
going to go to click the installation click on this link okay we have to go to the side and uh find it it is too much
1:40
take the time so it's directly there is a installation tab so I go to the installation you have to go you have to
1:45
following the steps you have to copy this you have to paste on it press enter
1:53
key first you have to install the angular CLI okay before you have to
1:59
install the angular you have to install the NodeJS i think you have uh I think
2:05
you have idea about how to install the NodeJS okay so if you want to the before the if you have not yet installed the uh
2:12
NodeJS first you have to install the NodeJS after that you have to install the Angular then only you will be able
2:18
to install the Angular right so node is a package management library without the
2:26
package management library we can't install the
2:32
angle after that what I'm going to it has been installed successfully now go
2:37
inside this folder you type the command cd my
2:46
application press enter key on your keyboard sorry you have to type the name wrongly application go inside the folder here
2:54
I'm going to I need a form angular form so that if
3:01
the form is not available in angular 19 okay the previous versions are the form
3:07
is available the is configure the form you have to easily add the angular libraries so I have manually added npm
3:15
install uh angular at angular form save okay you
3:20
have to note of this command you have to type yourself in order to add the uh
3:26
forms it is easy to configure the application right so inside the folder you go inside the folder and install
3:33
then only the form will be added into the angular libraries so press enter key on your keyboard now it is added okay
3:40
it's adding successfully now I'm going to open the project in VS Code editor code space dot okay press enter key the
3:49
entire project has been open in the VS Code okay all right so the project is
3:56
has been open in the VS C in my next lecturing thank you hi welcome back in our last video we
4:05
saw the two projects how to add two numbers student marks calculation we have completed now
4:13
you have a good enough idea about angular and angular materialized library
4:19
now we have to go the simple project the cred application we already done the
4:28
back end part as a spring boot application we already done these all things we already done
4:35
now the front end we are using the angular let me do step by step we
4:41
already created the project without wasting time i already created the project so here my first
4:48
application I have you know how to create the angular project without wasting the time i already created the
4:56
angular project and we already installed the material libraries you can see here you can see
5:03
the material library has been I have installed so everything we have completed now what you're going to do is
5:10
I'm going to go to create a two components i have to
5:16
create two components so here what you're going to do is here this is my project i'm going to go
5:23
to go to here terminal i'm going to type cmd i'm going to create
5:31
two component so I have to create the component ng generate C which is nothing
5:39
but component G nothing but generate here component name I'm going to type as
5:46
this one as student so here the student application
5:51
we our back end is all the student application so we have create as a
5:57
student first component I have created a student right you you can see here this
6:02
All the four file has been created uh another component we have to
6:09
create as a dashboard you have to create a simple
6:15
uh dashboard header right i'm going to create as a
6:21
header ng see header this how we have created the
6:28
components
6:33
right here we have two components we have created now you can see your
6:40
project now you can see your project here inside the app folder you
6:46
can expand X folder you have a header folder here you have a four file has been created or the another component
6:53
which is a student inside the student component we have a relevant file has been created successfully i hope you
6:59
guys you understood well we have successfully created the two components
7:04
adder as well as a student i'll see in my next
7:10
section hi welcome back in our last video I have teached how to create the
7:18
components uh I have created two components one is header and
7:23
uh student component now let's go to the header component if you go inside the header component you have a header works
7:31
if you got student component student works right now first go to the header
7:37
component here I'm going to default text i'm got rid of this here I'm going to
7:43
create the new bar so before create the new bar I'm going to attach this
7:50
bootstrap styles so what you're going to do is go to the Google here i'm going to type
7:59
bootstrap 4 here we have an we have get the nice types so you can see here boot for type
8:06
boost for implementation implementation you can get it here go to
8:14
the introduction go to the right so copy the CSS style okay copy
8:20
it back to my project click on the index html here you have to
8:28
paste it what is the index html i already
8:35
talked so I no need to talk again right first I have paste my bootstrap style
8:43
right perfect now we do the angular materialized design along with the
8:49
bootstrap style right now let's go to my header component over
8:57
here here I'm going to create a new bar so new bar this is a boost official
9:04
website so you type new bar and here click on
9:11
here here you can get it the new bar looks here this is the new bar you have
9:17
to get the style one of the style from here let's get
9:23
them so go below we have We have to get the stylish new bar so we have to get
9:29
below we have to have it ah here this is the one i'm I'm looking for this one i'm
9:37
looking for this this one so have to get it so we have to get this
9:44
one so let's get this one new bar copy
9:50
this back to my project you have to paste them over here inside the here
9:58
what you're going to inside here let's create a line this line I'm going
10:05
to add a class anchor a tech h sorry not the hg
10:15
you have to write class you have to write the
10:26
name brand you have to write brand okay we have to create the CSS styles okay so here this we have to create the simple
10:34
CSS style over here all right you have to set the padding and
10:39
everything you have to create the padding and everything here you have to create the name of the project i just
10:45
create the name of the project is uh student
10:51
management system right so we have the student
10:58
management system so here now let's file several
11:05
now I'm going to call this component header this component where we have to call it inside
11:11
the app component HTML here default
11:16
interface I I have remove it now here I'm going to call it which one I'm going
11:23
to call it this one where I'm going to get it here this one you have problem
11:28
this one this appro just copy it paste it over
11:37
here open and close now let's file save
11:42
all now I'm going to execute the
11:47
app so we have to type the command ng
12:00
ser now we have to wait until all the uh port and everything will be take care of
12:06
the port and everything will be take care of and running
12:24
it will be at the first time only takes some time to configure everything after that it will run run
12:38
normal now here it's run successfully just copy this port URL paste it over
12:45
here and press enter key on your keyboard here perfect right now we
12:51
didn't see any text over here we can't see but it return but we couldn't see so
12:56
we have to write the CSS style for that so here I'm going to go to
13:05
the header.component CSS here we have to write the CSS tag i'll see I will write
13:12
this one in my next video uh thank you for
13:17
watching hi welcome back in our last video we talked about how to create the
13:24
new bar we already see in this video I'm going to apply some CSS style for
13:32
attractive purpose so we have to write the custom CSS so you have to write
13:37
there the same name you have write it you have write here this one class name you have to write this class new brand
13:44
so write you can create any name I just named as new brand open and close bracket here I'm
13:52
going to apply some style so color text color I'm going to apply it as white
14:00
color text color I'm going to apply as white color font size font size I'm
14:07
going to give here as 30 would be enough 30 would be
14:14
enough after the font family if you want you can set it so I'm going to set it as a font
14:21
family
14:27
area i'm going to say AIAL so you can set up any of them i
14:35
want to set the padding as padding also i'm going to set it as 20
14:41
pixel now let's file save all and bring back to my application and check
14:47
it here the color is not working so what's the problem here go back to my
14:53
project simply you have to write it here if you're not taken so white space you
14:59
have to write uh press shift g plus one you have to
15:04
get this mark important you have to import it forget important right so okay
15:10
now let's file save all now let's bring back to the application here it's
15:17
okay it's working you have to check it right click here
15:23
impact everything to check it here this a background here so background color that here you have to select this
15:30
one impact here you text color font here
15:37
also you have to style it if you want to increase the font you can easily you can test if you want to increase like 40
15:43
here you can check it here you have to padding if you want to increase the
15:49
padding how would be look like here everything you have to test test are done you have to apply okay easily right
15:55
so okay how to do the thing is select the font here this one right click impact now you can get this right but
16:03
here is n bar this is the style we are given nar open and close right
16:09
perfect now I hope you guys you understood things well I'll see in my next lecturing so we have to here there
16:16
is a small spelling mistake I don't like to leave the spelling mistake so let me
16:21
correct it before you are you have completed at the video so that is not a good thing let's file save
16:30
all right now it's correct right perfect i hope you guys will understand
16:37
things well i'll see you in my next video lecture thank you hi welcome back in our last video we
16:46
completed the EDA section in this video I'm going to cover about the student
16:52
component part so in student component we have to create the form design along with the
16:59
table design so here this is add component this is the student component you click on this right now here the
17:07
default text I'm going to remove it now here first I'm going to start the
17:14
div class you have to write container
17:24
div contain class right it's a simple bootstrap class after that you have to write div
17:34
rows here you have to create the rows you have to write class you have to write
17:40
row inside the row we have to divide by divide the two two columns so we have a
17:48
first column which is a form another column which is a table column so we have to
17:55
separate them plus col you have to
18:01
write empty as a total size will be the 12 you
18:07
have to form I'm going to give as four remaining eight I'm going to put it
18:15
as my form so the same thing this is the first row the first column this is the
18:21
first column second column This one should be we have to commentate this one this a four the four right the
18:29
second one I'm going to separate as a table
18:36
class this one called
18:42
MB 8 right simple perfect this how we have
18:50
separated the two columns Now let's design the form so here I'm
18:56
going to first the form I need a heading so we have to write
19:02
H2 tag we need a H2 H2 tag that's enough
19:08
so like create student to make it as create
19:14
student after that this is the heading below the heading we need one
19:22
line so we have to write in bootstrap we have to write this h so one line right after that we have
19:31
to do the form design so first you have to write
19:37
do class here we have to write do class you have to
19:44
cut write card
19:53
body cut card
20:12
bodyg design of the form so your form tag first you have to put the form tag
20:20
so you have to write the form tag you have to write the
20:25
form open and close tag inside here you have to create the form so
20:31
here the form you can do the
20:38
materialize angular UI check out type on Google
20:43
[Music] Angular material UI click on
20:49
this get started here we have a
20:56
component component we have which component we need input click on
21:02
this here you have a styles so I need this one so we have to click on the
21:08
viewport we've got code here view code you can see here we've got code the first one
21:14
I'm going to get this one first one just copy that just copy it
21:20
and paste it over here simple stuff you have to go right
21:27
so it you can see here if you have paste it it shows some error so this error we
21:34
easily we have to uh solve this error first you have
21:40
to now we have to add these classes form field and matt label you have classes you have added go back to our material
21:48
design go to the TS file which is logic file here you can see here there's a
21:55
classes is there so you have to add add these classes so simply you just copy this
22:02
these three things we need map input module these three things So we just
22:09
copy this thing you have to copy them so it will be given the instruction if you
22:14
add the uh if you want to put this input box you have to add this modules then
22:21
only you will be able to add so you just copy it matt input module matt form field
22:29
module this form also we have this for modules as well so just
22:34
copy back to my project here go to the app module.ts file you have to paste
22:42
paste it here paste it over here right now this
22:48
libraries you have to add it here as you have to import it you have to import it how to import
22:53
it first you have to just copy this one control C to copy you have to paste
22:58
it over here sorry this one only this one you have to copy it ctrl C to copy
23:04
you have to paste it over here comma here you have to edit second one you just copy the M form field module you
23:10
just control C copy you have to edit over here third one form module you just copy
23:16
paste it over here right first you have to import the classes after that inside
23:22
these classes we have a modules these three modules you have to import if you imports here it will be work all the all
23:29
your projects now your material uh input modules and fields all things will be
23:35
applied entire projects if you add it now you'll be go to the student
23:40
component check it here error go away now that error has been go away now here
23:47
this class I'm going to customize it so here they are given the style as well
23:53
here they are given the styles here the form style also given uh if you if you
23:58
like you will be able to add the our own style as we'll be able to add our own
24:04
style let's add our own style so we have to uh I got uh let's put it and see what
24:10
happen this style this style same style I'm going to apply here without adding my own style
24:18
right now let's check it now let's file save all now let's run it uh go to the
24:27
app component html first we have to display the header after the header below the
24:35
header We have to display which component the student component so we have a ts
24:42
file get this one ctrl C to copy you go to
24:49
the this one html you paste it there
24:55
selector now that file save all and check it back yeah it's working yeah it's working
25:02
but yet it's not getting that full size why the style is not taken let me back
25:09
to my project so here the design so let's go to the CS ah here we haven't
25:16
implement the CSS type so where I paste it ah here I wrongly implemented here
25:25
that we have we have to put it inside the student component CSS i have added
25:32
here add a component CSS so here that we are doing the design by student
25:39
component HTML so we have to this that particular HTML the CSS we have to add
25:44
it on that particular component then only it work I add it on the header
25:49
component CSS it won't work so we have to cut off this one control X2 go inside
25:55
the student component CSS file paste here after that let's go to the documentation what they said it so you
26:02
have to go to the here CSS you have to go there as a CSS there separate file here you have paste this one as well so
26:08
you have to both you have to copy it copy it and paste it you have to copy both and paste it
26:15
over here now let's back to and check it whether it's working fine or not so here this is the design so here this is a
26:21
class we are calling example full width here this is the width and height
26:28
with all things that they are given match with our form design so let's save all we
26:37
have run the application check it here it's working perfectly here it's added
26:43
successfully okay don't worry about the style is working successfully without adding the custom
26:49
side it is working successfully uh I hope you guys you understood the things well i'll see in my next lecture in
26:56
tech hi welcome back in our last video we have to stop in this point now let me
27:02
check it whether it's working fine or not design so here let's go to our app
27:09
component html here you can see here have a route outlet so here this one I'm
27:17
going to at the moment I'm going to comment it at the moment you have to comment it this one you have to make a
27:23
comment right so you have to use the comment it you have to write you have to select the all and control forward slash
27:31
control forward slash okay control folder you have to comment this one now I'm going to call the employee component
27:38
so employee component if you call this page HTML page for the design you have designed you have to call
27:47
this TS file TS file you have a component selected here this one the selector I just copy it paste it here
27:55
app component after the name nav bar section right so paste it so to paste it
28:02
you have to bracket use this bracket use the bracket it automatically
28:09
it take care of the close tag now let's file save
28:14
all file save all now let's back to the application now
28:20
here it's working here it's working here it's working successfully working now it's not coming as full size the full if
28:28
you make the full size in my uh last credit application tutorial of the
28:35
angular metal light design i have made the style so here so this is the style I have made
28:42
the full size in order to make the form full size so that style I will take it
28:48
and paste it here this as well okay so here if you
28:54
are not watch them you you go and watch them that one so this this style you have to call it right this
29:01
style we have to call it right okay the form this style this all the style I
29:06
already explained the last credit applications and credit application of uh spring boot
29:15
and material UI in my first project right this is to app second project so
29:21
here first all the style have so that I just copy that style right the same style you have to implement it over here
29:28
so how to call them this style i already explained go over here m form
29:35
field class okay you have to write call this
29:43
one employee full width this one we have to write a full width we need a full width this
29:51
one full width we have to select all save all you have to bring back to the application here it it taken as a full
29:59
stack here it taken as a full stack it's successfully it's working it's working successfully we have to add another
30:06
other fields okay the all the employee all the fields uh I'm going to add it my
30:13
next video tutorial thank you hi welcome back in our last video we
30:20
complete the form design in this video I'm going to start table design so table
30:27
design I'm going to do here inside this column eight this one right this is the
30:33
size we have given this a form design for this one should be eight all
30:40
around 12 so the size so here I'm going to make
30:46
the foam design so first I'm going to add the
30:51
heading okay i write
30:59
student list student right list of student we have to display on the
31:05
table right so here also we have a HR right so we have a card design simple
31:13
car design also we have to implement the car design say car design you have
31:19
to you have to call the tape so cut your
31:26
card
31:38
bodyg how it look like so let me check it so let's go to the boot materials uh
31:47
angular here i have to get the table so you have to table you have to get the
31:53
table so a table you click on this okay this is direction so I need
32:01
uh pagination i want the pagation this table along with pagation so
32:08
below go below you can have a pagination style so this is not a
32:15
pagation there is no pagination pes or here this is a pagation we need a
32:21
pagination okay this is a professional i need this one i like this one so we have a pagation so how to get this how to apply
32:28
this one you just click on this view code right we have to implemented this
32:34
with just this all the design i just copy this one here copy back to my project student
32:42
component inside this car design i'm going to paste it right so you don't care about this
32:49
errors okay we have to add the we have to we have to edit the TS file you have go to the TS file now here
32:56
we have to add this one this modules map pagenate module and M table
33:03
module in order to add the table materialized table uh inside your design
33:09
so we have a we have to call them so how add them so we just copy
33:14
this imports these two things go back to my app model css we
33:22
have to paste it over here imports paste it over here so we know we only need
33:27
this this only we have no need this one let's let's add this also so you just
33:32
copy this to this modules matt modules comma we need this matt table box right
33:40
that's it with I I need these modules only math pagination module and map
33:46
table module you have to add that in order to work with the paginator and table right you just go and check it
33:54
here this error has been go away here that's it we have to add that 11
34:00
modules then the error is go away
34:06
perfect right I hope you guys understood the things well I'll see in my next lecturing
34:13
time hi welcome back in our last video we talked about how to design the table
34:19
uh now now let's continue the video right now what you're going to do
34:24
is first you have to run your uh back end application which is the spring boot
34:30
application after that here you can see get all method how the
34:37
get all method work this API we already done this one all the things are in our spring boot application so here I want
34:46
to get all the data from the database so we have a this is our
34:52
API student get all student we already done so if you are type the URL on the
35:00
postman the respected result will be display here it will be displayed now this result I want to display on the
35:08
table this result I want to display on the table so let me see how to do
35:14
this so back to my project what you're going
35:19
to here you can see there is a TS file here now you can see go to the material
35:27
uh material design you can see we have to do the coding part look like this here I just copy the
35:36
text all this I just copy okay here this is HTML part this is
35:43
a TS part the TS path i'm going to copy
35:50
this i'm going to copy these all things display columns is all this column headings what are the edings we need
35:58
uh pagination you have to implement the pagination all the things you just
36:03
copied back to my here you can see the student component our logic this is the
36:10
coding part so here I'm going to paste it that's the thing you have to write
36:16
okay we have to paste it okay so here you have after after you have pasted
36:24
uh this is not a error okay this is not an error
36:30
This is not error you point is here you have to click on here you have to add
36:35
that add the class just click it here there's a bulb symbol you click on it
36:42
you have to add the class this class will be added as you can see the class
36:47
has been added successfully see that's the thing you have to do right now here first line we explain display the
36:55
columns right we have display the column what are the columns you have to display to to the
37:01
table you can see you go to your back end student ID student name address
37:09
mobile and active so the same column we have to given here we have to
37:17
given here so first one should be the
37:22
student ID right student ID and this is like
37:28
this you can see if you go to the example you can see I already show the
37:34
example here student ID student name this is the
37:40
a we have to write it here you see student ID second one is a student
37:49
name student name after that what are the another column
38:01
address after that
38:07
mobile after
38:12
that active this active state just called as active so we have
38:18
a 1 2 3 4 5
38:24
That's it after that what you're going to do is here this one we have to do it as we
38:32
have any we have to call as any you have to load any data call any
38:42
that's it right so we have we are loading from the API here we are loading
38:48
the API request to we have given the data source the data do passing to where
38:57
here to load the data right we have to load the data that's the thing it will be we we are
39:04
going to do it right so here this one also you have to select this one to implement the class page in
39:10
enter the view child we have to call it here comma component okay so how to call
39:17
it here here you can see here if you go to the ts file they are
39:23
telling view child Okay component we have to call it a view chart so that is
39:29
a view chart okay uh the based on the documentation I have here based on
39:35
documentation view right that's the thing you have to create here the page you have to write this hold on the shift
39:42
key down shift key plus one right so
39:48
that's the thing you have to right now now these are the columns we have write list like
39:57
simply got to arrange
40:02
it make the
40:10
arrangement right perfect so these are the columns
40:15
so ID student name address mobile and act perfect i hope you guys understood
40:22
the things well uh these are the display columns of my database uh the table
40:28
columns display columns i hope you you understood so far uh in my next video
40:34
I'll be continuing the API uh request thank you for
40:41
watching hi welcome back in this video I'm going to connect the API
40:49
request so first what you're going to do is in order to connect the API request go to the app module.ts this file you
40:57
have to add that library which is
41:02
HTTP HTTP client HTTP client
41:10
module module so select here click on here if the class is not appearing here
41:18
what you're going to do is simply you have to write it
41:23
import so that import open and close bracket you have to copy
41:29
this module you have copy this module you have to add it over here after that what I'm going to do is here you have to
41:36
write single quotation it is reside on the angular
41:42
so angular
41:47
common slash
41:53
HD it will decide on over
41:59
here from right from I forgot to write the form right so if I implement that
42:04
here this error go away right sometime it's not uh sometime it will coming the
42:10
class if the class is not coming you have to write like this http client module from angular common htm it reside
42:18
on in this here common http right in order to
42:23
implement the API first you have to write it http client after that what you going to do
42:30
is you have to go to the student component this student component component our logic file here I'm going
42:38
to write the constructor so you write the constructor constructor you write the
42:47
private http
42:54
http client open and close bracket now
43:02
Here you have to implement the this class okay now we already we have the
43:07
add this class so add import the angular common http it's coming from that class that's it right perfect after that what
43:17
you're going to do is first we have to this is the API we use to view the records here this
43:24
is the API this API we have to call into our angular program to load the data
43:30
into the angular table so how to do the task you have to simply you have to
43:37
create the method which is a get all
43:42
student get all open and close bracket
43:50
here I'm going to type this dot http dot this is a get
43:59
request as you can see the API is a get request the same thing in angular also
44:06
you have to write this http get request you have to add the API request over
44:13
here within the double quotation mark you go to your Postman copy this
44:20
API paste inside here after that dot you have
44:27
subscribe your subscribe you have to get the values to the you have to write the
44:32
you have to write result data you write result data result data any you have
44:39
write any after that you have to write the arrow
44:45
function you have to open and close bracket here what you're going to here
44:51
you have to close it here here once you get the data from the API
44:57
it will be loading until uh it will be loading dot
45:03
subscribe subscribing until the load data loading after loader it will be passing the result data after that what
45:10
you're going to do is here in this data we have to where we have to pass it to the table so we source this dot data
45:19
source equal new this one right the meta meta table mean this
45:26
is the angular materialized table we have to passing the data
45:31
new data met data source what is the thing you are passing this API data this
45:39
API data is loading via the result data right once you given here this all the
45:46
data If you all the data via send button all the data will be loading it all the
45:51
data will be passing via this result data we have to pass into the our table
46:00
that's the thing right after that we have write this dot data source dot paginator we write
46:08
the page we need a pagination as well so the paginator equal this dot
46:16
Paginator you write paginator that's it after that that's the thing you have to
46:21
write perfect now if you have the testing purpose you have to test it you using the console.log you have to write is this
46:28
console.log This is our data we'll be check it whether the data is coming or not successfully through
46:36
the console let's comment this two let me check before you are passing the data
46:42
into the table we'll be checking whether it's parking passing the data is right or not right now let we can check it
46:51
right so before we checking what we are going to do is this is your table uh your method this method
46:58
you just copy paste inside this constructor if you paste inside the
47:04
constructor when the uh when the program is loaded this constructor get executed
47:09
right the constructor get in uh uh get loaded so you have to write this dot get
47:17
get all students right file save now let's go back to our angular
47:25
application it's loading
47:31
uh right now here you have here your table is coming but the we haven't do
47:37
anything else that's why it's blank table here the pagination all the things are there now let's file say uh here go
47:44
to the uh click on
47:52
this here you can see the console
47:58
here the data is coming successfully this data is coming
48:03
successfully here this data this data here student ID student name all things are successfully coming
48:10
here because you have tested when it's coming successfully or not now let's
48:15
it's coming successfully now it's subscribe to you remove the comments
48:21
right now we have to pass the data into the
48:26
table so here what's the data is coming here results data we are passing to the
48:32
data source and page it's a data source you can see the data source mean it goes
48:38
to the student component here student component m data data source so all the
48:44
data value will be coming here now we have to get it here so first one this is
48:50
one should be the student ID so this this
48:56
field what the field is this check this one uh you can go to the API again here
49:04
right click impact then you load the data here it's coming here the student ID student the same name you have to
49:12
give so the student ID you can the student ID student name and mobile this
49:18
all things right so student ID you have type that thing is here student type
49:24
ID ID after that this one should be the student
49:29
name student name after that third one should be the
49:35
student time ID uh address mobile active state right so here the same name we
49:41
have type so here we have to retrieve the value matt column def here right so
49:47
in the position also you same thing your student ID type it here student right so
49:53
this is the name the column name so student this one should be the
50:01
student name third one should be the student
50:07
address here also address okay you have to see here the
50:14
same name you have type address was the name you are given after here I'm going to give you as an address
50:21
ID here also the same name you have type it here also
50:27
address after that here also mobile here also mobile
50:36
setting element we have type as a mobile the final thing is active state
50:43
so we have we need one more column Copy this paste over here this one should be
50:53
active you can see active here this one also
51:01
active here also you have to make it as active that's it now let's file save all and back it
51:08
and check it here
51:16
so here we can found the error could not find the column my okay I have leave the
51:24
small mistake that's why it's not coming here this one here what I did here is the student
51:32
ID student name address mobile and active this all the things the TS file
51:38
this is not a heading not this heading okay we You have to give these names
51:44
okay the column names what are the columns of the database columns okay
51:50
what are the this display columns mean this display columns which mean is what are the display columns in your database
51:57
table okay that's table name you have to give it here second one student
52:04
name so okay this one what's the name it is coming here student name address
52:09
address mobile that's all thing student
52:15
address mobile this one should be
52:21
active that's it that's the thing I have file save all came back to my
52:28
application now here it's loaded successfully but what's why the name is not loaded what's No problem with that
52:35
student name uh back to my here is there any problems to sorry here
52:43
the name I I given wrong this same thing you have given here name now let's pack it here this element
52:50
the element you have given the correct name then only it's work now it's loading
52:55
successfully I hope you guys understood things well I'll see in my next
53:03
lecture hi welcome back in our last video we saw how to load the records we
53:10
saw how to load the record uh in this video I'm going to talk about how to add
53:16
the records so you already made the design of the registration
53:21
form now let's see go back to our uh project go to
53:29
the student compound.ts file here we have to write the logic
53:36
so this one should be our display the records now I'm going to do the thing is
53:41
I'm going to create the here I'm going to create the variable now here first
53:48
one should be the student name student name the student ID should
53:54
be we have in back end we have create as auto increment so that we have to create here as student name you are going to
54:00
add the so you get the field student name colon we have to give the
54:08
appropriate data type which is a string so string data type you have a you have
54:13
to write like this you have to create the variable this variable name this appropriate data type you have to the
54:20
data we have write is just a blank right this this write this data you have to giving giving into the your phone your
54:28
phone you are typing on the that data the data it will be passing here the
54:34
second data which is a address that also string
54:43
Okay that also the strata should be the string data type which is address also
54:48
string data type after that mobile which is a integer you write
54:56
mobile it's a number you write on angular which is a number equals zero you have to write
55:04
zero after another one is active the active state which is a boolean type
55:11
true and false so you write the variable boolean two default it is true to make
55:19
the changes it will be it will be false and that's it that's the thing we have created over here that's the thing we
55:26
have created over here perfect now let's we have created the variable
55:31
successfully now what you're going to do is I'm going to go to
55:37
uh create the function which is a registration function before that we have to go to this all the variables we
55:44
have set into the form so your form this is your form
55:49
input field this is the input field we have to create the input fields here this is the input field we
55:56
have created so the math input here what you're going to is you have to write it
56:04
the angular ng model you have to write the
56:09
ngmodel you have to write ng model so here ng
56:14
model you have to write equal student
56:20
name student name right so what's the name you are typing on the
56:26
student input field this that particular name this particular the same name you have to switch this
56:34
name it is it will be display over here right okay what is the name you're
56:40
typing What the name you are typing on the input field this name will be
56:45
storing ng model it will be storing here this ngm model the name it should be storing the ngm model after that you
56:52
have another component you have to write it here write ng model option
57:02
options uh equal you have to write
57:09
standard stand
57:16
alone all right engine model options
57:24
equal stand right so now uh when we load the
57:30
form what is the value you're typing imagine you are typing
57:35
John this John name will be storing this ngm model right it will be passing to
57:43
the ts file over here right that's how we have we'll be able we have to pass in the data right
57:50
the ngm model right so the same thing we have to do the second one also the
57:57
address also we I just copy
58:02
this and here address field after the input we have to paste it over here this
58:08
one you just named it as address here the address is pop up it's
58:14
coming from here from the TS file address right third one is a mobile
58:22
the same thing just Copy it paste it over here third one is
58:29
a mobile that one is a mobile right you
58:37
have some mobile after that our
58:42
uh fourth one is a fourth one is a active this is active
58:48
this is active here this active you have to uh put it here the selection here
58:54
required after that we have to write here
59:01
class ng model this one should be active select active that's it that's
59:08
the thing you have it here the selection active right it will be what is the
59:13
selection you have if you have select as true it will be true will be storing here if you are select false it's false
59:19
will be storing here right so this all John address all the things what What
59:25
what the value you are typing on the fields the fields value are storing here the ngm
59:30
model the ngm model will be passing to this ts file here student name what's
59:38
the name name coming from the form it be store what's the address coming from the student this
59:43
form mobile and active that's it that's how storing the
59:49
value after that we have a registration button so we have the
59:55
registration button registration button so you go to
1:00:02
here here we have a save button save you have to write
1:00:07
a one click okay
1:00:13
click this one you called as we just called as
1:00:19
register type your register the register method when you click the save after enter all the values click save button
1:00:26
it calls the register function register function is where it is in the TS file we have create the
1:00:32
register function
1:00:39
register right now we have retrieved the values
1:00:45
okay so here so all the values are coming from the form this value we have set into the database API fields right
1:00:53
so database API fields mean so we are go through our database uh postman you can
1:00:58
see here these are the values on your back end application these are the values so we have tested so here ID
1:01:05
should be auto increment once you add the record ID should be auto increment so we don't need the ID rest of the
1:01:11
fields you just copy it here just copy it control C copy and paste it here right here this
1:01:20
is your postman you can see postman you just copy and paste it simply I'm I'm
1:01:26
telling you the easy way to make the application you have to align correctly here like this okay now what you're
1:01:33
going to do is this is your form field here when you add the record you are giving your own data
1:01:39
here okay here when you add the record here when you post the record you post the record the body tag here you are
1:01:45
giving your own data okay the same thing here what you're
1:01:51
going to do is you have to give the instead of giving your data you just enter the data what the data you're
1:01:57
typing on the form that data you have to given here these are the your back end
1:02:04
field these are the fields you are setting here the postman these are you are setting as a back end the back end
1:02:10
application you are setting okay here these are the fields you are setting the back end save d we already show these
1:02:17
are This how we have the name you have to set it the same name you have given here
1:02:25
right that's why I just copy that copy from here right now here you have to
1:02:33
pass in which data we have to uh add into that uh database your form data
1:02:40
that is that form data you have to pass into the API value so the form data is
1:02:46
once you enter the name address mobile number and active what
1:02:52
happen I already show the flow it will be storing here it's simply passing to
1:03:00
the TS file over over here and this all the values will be passing to here so
1:03:06
you have to write how to get them this dot student name you have write this dot
1:03:13
student name right student name right student name comma
1:03:24
uh what's the problem sorry what's the problem here is okay I just cut off uh
1:03:30
control x to cut off what's the problem here is you have to write the you create the variable which is a leg variable
1:03:36
table this also the JSON format you have to add the recording as a JSON format
1:03:42
you have to write you have to create the create as a JSON format that's why it's getting the error okay you have to
1:03:48
create like this way right you have to create like this way okay so here you
1:03:54
have to create a variable let body data equal you have to create a JSON format
1:04:00
the JSON format I I already show once you add the data The post method here I
1:04:07
post method I have accented here open bracket and close bracket here these are
1:04:13
JSON format you have to sending the value so here also we have to write it's a
1:04:20
JSON format this JSON format inside here you have to write here so one name this
1:04:26
is fine second one should be address this dot address okay this is
1:04:33
the API which address you have So uh this uh here we have to pass it the form
1:04:39
address third one is a mobile the same thing is just comma copy this here we have to write
1:04:46
this mobile so we have just mobile after that final one should be
1:04:54
the active selected that's it that's the
1:04:59
thing now this data is this form the form data we have to assign to the relevant field of the
1:05:08
API uh values and sending to the API URL
1:05:13
okay so API URL we have to send it so we have to what is what is the URL what I
1:05:20
did here is this is the URL we are g okay student save the student save right
1:05:26
student save okay so here you have to go here simple you have to here go this
1:05:32
things the get all function is save API just
1:05:40
save here you have to save the record okay this is a force method you try to
1:05:46
post method and save the record right so what you're going to do is what happen is this is the API so API just copy we
1:05:53
already we tested this all the API you no need to test it again right So let's
1:05:59
what you're going to see here this is the post request so post request
1:06:06
post this http dot
1:06:12
post write open and close bracket inside here we have to paste
1:06:19
it right it's a post request right okay when you are uh add
1:06:26
the records we have the post method we already we already discussed about these all things when you are doing the back
1:06:32
end So we no need to discuss comma you have to write
1:06:40
body data body data mean what is the thing this is the API which data you are
1:06:45
going to passing this all the form data we are passing like this thing if you are writing here the
1:06:52
postman here this body this is the body this all the body we are passing to here
1:06:57
the same thing here we have do it here as this all the body data same like a postman you have to pass
1:07:04
into here right so after that comma you
1:07:09
have to write it another thing of springboard uh if you are doing as a back end
1:07:14
springboard you write rest type I'm going to give here as
1:07:23
text response type you have to give as text right that's it now after that dot
1:07:30
subscribe you have to subscribe until add the records to the database After
1:07:36
that you have to write you have to if the record this data is added succeed or
1:07:42
not we have to passing as a result data result
1:07:50
data dot n right you have write here you have write
1:07:57
the arrow function open and close bracket right here I have to get it
1:08:05
two lines that is a for right after that what I'm going to do is right now here
1:08:11
the data is successfully added the data is successfully added we
1:08:18
have write it here art you write here uh art you write
1:08:25
alert message record student register success from
1:08:33
Student registered registration
1:08:41
successful right perfect now let's file save
1:08:49
all now let test whether it's working fine or not right now what you're going to do is I'm going
1:08:55
to first John address
1:09:00
India mobile number I'm going to give some mobile number active state and lead group click save button student
1:09:08
registration success it's working fine click okay now let's go back to here
1:09:15
API which is student uh we have tested
1:09:20
get let's set Uh first you have tested here after that
1:09:26
you have to test the table right so you test out here get all this tested here
1:09:31
newly added record will be here the newly added record will be passing successfully john India this all the
1:09:39
record will be successfully added right now we no need to check once we add the record we don't need to check on the
1:09:45
postman whether it's added or not we will be able to test it on the table
1:09:50
right so I have uh tell you the two ways that's why I will I will be show you
1:09:56
this this also so here you can test it because I already done the table part as
1:10:01
so how to test it here you have to call simply after the records here get all student you have to
1:10:08
call it over here okay here this dot sorry get
1:10:14
all this dot you have to write this you have to use this okay this form this
1:10:19
mean this form okay and angle you have to this right now you can see here here
1:10:26
newly added record will be here now if you add another record so after add the record I want to clear this field that
1:10:34
also must so how to clear the in angular write this dot the form names
1:10:41
This one student name equal you have to write like this
1:10:48
by double quotation how does this dot
1:10:55
address equal clear
1:11:01
restart mobile equal
1:11:10
clear right sorry mobile is not a clear it's not string it's a boolean right so
1:11:16
after that you have to clear this all things after that active state is just a boolean so that we have a default value
1:11:23
should be true you have to write a true that's that's the Okay okay right the
1:11:30
form will be loaded again and all the value must must be clear so file save
1:11:36
our back to our application you can check it i'm going to add another value which is a
1:11:41
PA address India phone numbers or something like that back to state row click hit save
1:11:50
button here shouldn't register successfully click okay here all the fields should be clear yeah it focus
1:11:56
yeah yeah uh the final record will be PA India mobile number and district it's
1:12:04
working perfectly well I hope you guys you understood the things well I'll see
1:12:09
in my next lecture hi welcome back in our last
1:12:15
video we saw how to register the record in this video I'm going to talk about the updation part so we have
1:12:24
a five columns we have to add another column which is uh
1:12:30
action that is the action column consists of two buttons which is edit
1:12:35
and delete so back to my project student component this
1:12:42
one here you can see this is one this one
1:12:48
the same this column just copied paste it below this one you have to make it as
1:12:56
active so the same name you have to given here as well the TS as well
1:13:03
here here display columns here also we have added the
1:13:11
action right action we are not getting from any API data we are getting the
1:13:18
buttons we have a two buttons the ID only we are getting right so here we're
1:13:24
going here right go to uh uh form
1:13:31
active this active you have to name it as this one what is the things action action we make it as action so here we
1:13:39
have write as this one as action right so now here the third one
1:13:47
the element this one we have no need this element this tag we have to remove
1:13:53
it here you have to element I have to make it as row a left row so here what you're going
1:14:00
to do is we have to uh we have we needed two buttons so
1:14:07
first how to decline the buttons we already done so the same code we just
1:14:14
copy this one of this button paste over here right in instead
1:14:20
of the text what I'm going to do is I need a icon we need a icon okay instead
1:14:26
of the text I want to make it as a icon so how to test the icon so this one we
1:14:32
have to make it as a button we have primary make as primary here I want to
1:14:38
make the icon so go to angular material material you have to
1:14:45
icon you click on this icon here this icon how to icon here there are various
1:14:51
icons there you go to view for view copy
1:14:56
this this icon paste it over here but it take
1:15:02
error how to solve it go to the go to the example uh go to the API okay this one
1:15:11
you have to you have to this one you have to call it copy this this M typhon
1:15:17
module where I want to call it now you have idea we are inside the app module
1:15:24
ts you have to implement it over here this one you just copy comma and paste
1:15:29
it that's it now the error go away now if you go and check the error has been go away
1:15:37
okay right now not this home icon that is not a suitable one for for this right
1:15:45
so this one we have to make it as edit icon so icons you can find it the name and everything you can go to Google font
1:15:53
so again go font google.com this
1:15:58
one you click on this here you will be able to find it
1:16:04
the icons here there is a option icon you just click on the
1:16:09
icon just click on the icon here there is a there are various icon is here
1:16:15
loading my internet connection little bit slow that's why it losing now here
1:16:20
you can I want to find out the icon here side is load Now here I want edit icon
1:16:26
so I'm just edit press enter key here the edit I need this icon you click on
1:16:33
this here you go below what's the name over here this edit this one you have
1:16:38
given here okay this this edit you have to type on where here the font icon you have to
1:16:44
type the name edit that's it right after that the same thing the
1:16:52
same button I just copy and paste below for edit this one for the edit so
1:16:58
the color I'm going to change this as one just color change one here here this
1:17:06
one font icon I want to change it as
1:17:13
Delete press delete i want this one click on
1:17:18
here uh person delete should be delete so simply you have to
1:17:28
delete that's it now file save
1:17:35
all back to my application here action here edit and the two buttons
1:17:41
here yeah edit and here simple okay if if you need a space between both here
1:17:48
same write here uh what in between the buttons you have
1:17:57
write NB this one file save
1:18:04
all right perfect nb print the button you have to give the small space you
1:18:09
have to write this you have to write like this
1:18:14
nbs perfect i hope you guys you understood things well click the edit button this is the edit button this is a
1:18:20
delete button if you click the edit button the editable record would be
1:18:25
passing to the form for edit so how to do the things let me see so what you're
1:18:33
going to do is back to my project so here this is the edit
1:18:39
button we already done in our last video now here what you're going to do is we
1:18:45
have to set the on click method so here you have to
1:18:50
write the here the primary here this one after the primary here you have to write it
1:18:56
here click write the click
1:19:01
equal you have to set update you have to create the function
1:19:07
set update you have to make as row yeah this row this row object you
1:19:13
have to pass let row okay when you click the edit button
1:19:20
Okay when you click to edit this icon it goes to the function set update function
1:19:27
this function we have to created where we have created this function into here
1:19:35
this DS so it'll be
1:19:41
created create set
1:19:50
update open close right okay we have created the function
1:19:57
now what I'm going to do is this function inside here you have to write data you have to write any if you write
1:20:05
any all the data will come out right any data right which data you passing when
1:20:12
you click the edit button when you click this edit button this all the row this row this all the
1:20:19
row data we have logo data will be passing to
1:20:24
where they where here so how to retrie the data you have to write it
1:20:30
here just a form this dot
1:20:36
this dot student name equal the data is coming here okay
1:20:42
this is the form this form mean what's the data you are coming here we are set into the form if you click this edit
1:20:50
button this all the value setting by this form so this form what is this form what
1:20:57
how to set it here this dot student name here you create a variable student name
1:21:02
address mobile and active so the same this dot this variable you have said the
1:21:07
data you write you're receiving the values data dot
1:21:13
student name data student name the first
1:21:21
value this is the address okay that's how we have said it second one this dot
1:21:30
address equal data dot
1:21:36
address when you click edit button the data is coming into here so you have to
1:21:41
get the data data dot student collection data coming here it it get one by one
1:21:47
should get student name it assigned to here here data uh student data address
1:21:53
this address should be assigned here so third one should be our mobile so we have to
1:22:01
write this mobile we call data do
1:22:13
mobile just copied and paste it over here and third one should be copied and paste the
1:22:20
active here also data should be active that's it that's the thing this
1:22:27
how we have data is coming after This id this is important stuff the id when you
1:22:33
edit the data you have to get the id so how to get the id simply first you
1:22:38
have to create the variables so you have to create the variable over here you have to write
1:22:44
create the variable current this efficient way to create so just student ID student
1:22:52
ID equal I write like this okay now current student ID right we
1:23:00
have create the variable over here right now what you going to do is when you click the edit button the editable
1:23:08
record will be passed into the form so here you have write this id also you have write get it here this
1:23:14
dot current student ID equal data dot
1:23:19
student ID that's it now let me check
1:23:33
it click edit button here the editable record will be passing correctly here if you click second one third one here
1:23:41
successfully you're getting here it passing successfully now you'll be able if you
1:23:48
want to edit the John record you click the John here edit button here editable
1:23:54
record will be passed into the form successfully i hope you guys you understood the things well in my next
1:24:00
video I'll be teach how to edit the record here after you make the changes click the save button save button the
1:24:08
only the save button we have do both edit and update uh sorry save and update
1:24:15
both are doing by one but one okay if you have clicked edit it will be edit the record if you save it
1:24:22
will save the report will be do by only one button perfect I'll be seeing my next
1:24:30
tag hi welcome back in our last video we saw if you click the edit button
1:24:35
editable record will be passing to the form successfully in this video I'm going to teach how to edit the
1:24:41
record so I already told edit and save both are doing one button okay
1:24:50
save button so how to thing is back to my
1:24:56
code so here this is my uh passing the record into the editable
1:25:02
form i wrote it here after that we have to create another function for update so
1:25:08
you have to write it update data i just use update
1:25:19
data open close that here i'm going to write it here the same edit the
1:25:27
registration what I wrote here we just make the copy okay we just we just hit
1:25:34
the copy of this one ctrl C to copy okay here I already explained this all things
1:25:40
we just Ctrl C to copy paste it inside the update data
1:25:46
here right this if you are write the save successfully update also we have to
1:25:51
make the little changes right so update the data we have
1:25:58
we need the ID because save data what's the difference between save and update
1:26:04
save mean you have added new record update mean existing record you have to
1:26:11
make the changes and you have to update so we need one thing because ID we need
1:26:18
ID existing record we have a ID that particular ID we need for update the
1:26:24
records So here we have the id so id okay we have id so id column we write
1:26:32
here the id column student student ID this is student ID
1:26:41
right student ID so here the back end you can see here sub data you can say student ID
1:26:48
here this all thing I will be explain right the student ID the same name we
1:26:54
have writing here colon here which
1:26:59
ID which ID I have created one variable for update the data so here is the
1:27:04
current student ID so the current student ID when you click edit button it passing to here the student ID passing
1:27:11
to here so here you have to write it here this dot current student
1:27:19
ID write sorry current student ID that's the things you have to write
1:27:25
it that's it you get the ID and these are the records you have to update these all things we already studied how to
1:27:33
update the record in postman so this ID right so after that here this API
1:27:41
which is a update API update API here controller we
1:27:48
already we have done these things update when the record is coming this is
1:27:53
/upate right so here we already we done the all things in postman if you are not
1:28:00
watching that video you must watch it right so this slash update so the
1:28:06
same you have to write update
1:28:11
Another thing also the same only the changes between uh save and update here
1:28:17
we have the additionally the ID so here we have to change the URL the same we have changed it as
1:28:24
update right so here student update successfully
1:28:31
updated data successfully i think you have to all the uh table will be clear table should be
1:28:40
reordered and here we already the form value has been reset simple stuff right
1:28:49
this how we have make the update data i hope you guys you understood
1:28:54
things well in my next video I'll be teach how to make update and save both to one
1:29:03
button thank you for watching hi welcome back in this video
1:29:09
I'm going to teach the button which is a here the form button which is a save the
1:29:17
save the save data and update data both are doing by one button so bottom you
1:29:24
have this name you have to save so save what you're going to do is here I have to make the function
1:29:32
save right the save method I'm going to change the function name as save the
1:29:37
save function you have to go to my student component tsd file here what I'm
1:29:46
going to do is what I'm going to do is here I'm
1:29:53
going to make one function
1:29:59
save right what happens when you
1:30:05
click this function it will be tested whether record is going to update at all
1:30:12
or save so we have to make the validation so validation out the validation so
1:30:19
if you have to make this this ID this dot current student ID equal equal blank the
1:30:30
if the ID is blank there is no
1:30:36
ID if if there is no ID when you click edit button if you if you imagine if you
1:30:42
click edit button the ID will be generated so when you click edit but
1:30:47
what happen is this ID should be stored in here okay so here if the ID is blank mean we have
1:30:57
to add the so this dot we have to call the register
1:31:02
method this register method we here we have create a register
1:31:07
method mean save okay right
1:31:13
if the ID is here this this ID is blank mean it will be register the data
1:31:19
otherwise we have to type else we have to update the data so this dot we have
1:31:27
create the function update data simple take it as simple here this
1:31:34
works okay if the ID is exist when you click edit button the ID
1:31:41
exist so that time the update works the ID is not exist that
1:31:48
times right so let's do all things okay clear I'm going to all things I save
1:31:55
all right so here when you click save let let me test it how the thing is
1:32:01
works here I'm going to so James address
1:32:08
India mobile number I'm going to type something like active I'm going to uh
1:32:14
true click save button here student register successfully clear all the fields now here the newly added student
1:32:22
record will be saved successfully here loaded if you want to edit the record click on the edit button i want to
1:32:28
change India
1:32:35
Chennai James Peter something to change it again here
1:32:42
click save button what
1:32:49
happened any problem you just go
1:32:57
uh load student update there's a problem with
1:33:03
the update part so let me check it so let's go through the
1:33:09
code uh right here there is a problem with this the method so here you can see
1:33:15
here the back end you can
1:33:21
see here if you are at the record we are using the post
1:33:30
mapping view the record get mapping put mapping we are using the update so here
1:33:36
we are using the you can see here post I forgot to change this as a put you have
1:33:42
to make it as a put that's a problem right that's a put method so Here when
1:33:48
you save the record you have the post method you have get the records you have to get method get the record from the
1:33:56
database register record the post request once you update the record you
1:34:02
have to use the put method as well now let's file save all now let's test it
1:34:09
click on James here I'm going to say change as beta India you have to write Chennai
1:34:19
phone number I'm going to change something click save button here student
1:34:25
updated successful it's working perfect for here if you updated here updated
1:34:30
record will be changed if you want to change this one and make it as
1:34:36
an US a
1:34:42
USA from phone number active we have to make it as Pause this one you have to
1:34:49
save okay student updated success here one thing you have to forget to do it
1:34:56
here you can go here coding here once you update the record we have clear
1:35:01
everything is name address and mobile and active one thing he haven't cleared
1:35:07
that is ID so if you are not clear once you update the record it will
1:35:14
be when you add the new record it consider you update the record so the ID also you must clear so how to clear this
1:35:21
this current ID this current
1:35:27
ID equal we have to clear the ID as well right so that is
1:35:33
must save all again we'll be check it here i'm going
1:35:38
to change it here i'm going to check it here i'm going to click here i'm going to remove this one peter also remove it
1:35:47
click save student updated successfully now I'm going to write now I'm going to
1:35:53
add the new new record i'm going to add it as a
1:35:59
Kumar India phone number hit save button now here student
1:36:07
register successful okay student register successful here the record is not
1:36:12
show next page you can see kumar here right now I'm going another
1:36:20
record i'm going to edit this record so here this one I'm going to edit this
1:36:25
record this record I'm going to edit click on this commum record click on this and
1:36:32
edit uh India i'm going to make this jo
1:36:40
SA click save record updated right now I'm going to add the new record which is
1:36:46
a Bala India phone
1:36:52
number i'm going to make it as false save student registration sub here now
1:36:58
working for now if you want to edit the record you have click on this bal v
1:37:05
click save student update here okay this is a pagination part only the file
1:37:11
record will be showing if if you want to uh if you want to see the remaining
1:37:17
records you click on this next page now you will be able to see the remain the
1:37:23
rest of the records thank you for watching i'll see you in my next
1:37:29
section hi welcome back in our last video we saw how to update the record in
1:37:36
this video I'm going to teach how to delet the so this is the delete button if I click on this we want to delete the
1:37:42
record so what I'm going to do is here I'm going to go
1:37:48
to the design so go to student component HTML
1:37:56
you go to the this is the delete button so delete
1:38:02
button here we have to write the on click method so you have to write
1:38:09
click you have to create the method set delete here also you have
1:38:17
to this row we call this row variable okay now when you click the edit delete
1:38:24
button we want to delete that particular row so this delete method we have to
1:38:30
create the TS file ts file so here I'm going to create
1:38:37
as set delete set delete here you have to write
1:38:46
data data you have to write data you have to write any open and close right now here how to
1:38:56
deal the record we have to write it here this dot
1:39:02
http dot delete delete here we have to pass the
1:39:08
respective API bus API for delete the record so you already we tested this is
1:39:14
the record we are using the same thing you have to write the same API just copy
1:39:20
it okay here you have to copy it don't copy it simply you have to copy this one
1:39:26
only the changes here this all things are same every API request only the the
1:39:32
the end point is only we have to change it so endpoint when you build the record
1:39:39
we are using like this slash delete so
1:39:45
write it there slash delete okay slashde delete go here write
1:39:50
slash delete you write a slash delete right after that what you're
1:39:57
going to do is here you can see look at the
1:40:02
uh back end you can see that there is a path variable you have to handle the path variable you have to give the ID
1:40:08
here right so here now to how to handle this one you have to write it
1:40:15
delete you have write plus right you have
1:40:20
to slash slash the slash mean here this is a slash you write the slash
1:40:25
dash so ID you have to plus the ID you have to write the ID so
1:40:33
data dot student ID student
1:40:41
ID student type right so what I did here is when you click this edit button the
1:40:48
delete button what happen is completely row record will be uh complete record will be existing
1:40:56
here so I need only this ID record only so we are getting here when you click
1:41:02
the delete button it's coming every all the data the same thing like this the
1:41:08
same thing update like this if you write data any mean if you get all the data it
1:41:14
will be coming you can get any data over here so I want this data dot student ID
1:41:19
only so we get the data dot student ID after that
1:41:26
comma you have write This rest of the things this rest of the things we just
1:41:32
copy this one copy this the rest of things all the things
1:41:38
copied until the subscribe but paste it over here that's
1:41:44
it right so you have to you have to close the bracket that's it that's the
1:41:49
thing you have to write after that after this is the record what happen is we have to reload the we have to get the
1:41:56
message part you have to write
1:42:02
student deleted student deleted student deleted right perfect so you have delete
1:42:10
the record like this after this the record what happen is we have to reload the table so reload the table you have
1:42:17
to write this dot get also you just copy this one or paste it okay so delete the
1:42:23
table we are we are not passing the data into the form and deleted the data data we are not going like that when you
1:42:29
click the the button the entire error has been deleted right and later on we
1:42:34
will be see put the confirmation box when you press delete button it
1:42:40
task yes or no if you click yes the record has been deleted if it is click
1:42:46
no it is keep on the table we later on we have do it now we do like this so
1:42:51
just save all now you reload the application and check
1:42:57
it now I want to deleted this account and click delete button student deleted
1:43:04
click okay here if you click second one see here I want to delete this one it's
1:43:10
deleted here it's working for the bar I want to delete you click on this but
1:43:15
this is not efficient way we have to put it to the confirmation box that's all thing we have to do in my next video
1:43:22
tutorial thank you for watching hi welcome back in this video
1:43:28
I'm going to teach the colorful alert box so we have to go to the Google and
1:43:37
type sweet alert so this is the best website click
1:43:44
on this here you can see the all thing you you can test it here go to the example
1:43:52
here if you click on this here it will be working look like this way so I want
1:43:58
to add it here i want to try out this here there
1:44:04
are various things there so grade here everything is there so I want I want to get this one click
1:44:11
on this yeah this save here i want to test out this okay i want to get this
1:44:16
one so let's copy this
1:44:22
let's copy this this one let's copy it this one and copy it okay i want to I I
1:44:29
want this copy so before that I want to add the
1:44:35
library before I copy it so I just first copy this one this one and back to my
1:44:45
project save me where has a save method save the registration instead of this
1:44:50
alert message I'm going to put in this one i comment it i don't
1:44:56
need them at the moment we have to put in this one so here we have to write it as student register successfully just
1:45:02
copy this text i just copy this control C copy i take this here title I'm going
1:45:09
to make it as student register registration successfully the timer also just uh put
1:45:16
it here after that here the position we don't need them i just get rid of the
1:45:22
position so here this one we have to import it the that's why it show the
1:45:27
error so here we have to import the installation installation we have to install this one that's why it show
1:45:34
there so you just copy this so just copy this one back to my project my project
1:45:41
is running over here my project is running over here uh I'm going to go to my project directory and install it okay
1:45:48
so you have to go to my project directory where the F drive F drive angular ex that's a folder
1:45:56
I have I have done my project
1:46:03
angular this folder here this is fast you will be able to do it here as well terminal this
1:46:10
this is fast so that I'm going to do it here as well same you have to paste them
1:46:17
press enter key on your keyboard go inside and install don't install here go inside the folder here you all the
1:46:23
folder section file is there here you have to install them right the mpm
1:46:28
install right it is installed successfully uh but after that our work
1:46:34
is not over we have to copy this one script this all the things okay you just
1:46:39
copy it uh so let me say after that install that but copy this okay here
1:46:45
after install it's fine you don't need here if you if you not installed you can
1:46:51
copy and paste this this script inside your
1:46:56
index.html inside the tag you can paste it if you install we no need okay so
1:47:02
once you install here it ask the import you have imported the error go away
1:47:09
perfect now let's file save all this is works i just save the same thing i just
1:47:15
copy it i want to put it the update data as well so there's the update part here
1:47:23
all the alert I'm going to comment instead of that I'm going to add this
1:47:28
one student updated successfully updated
1:47:36
successfully save all right now student
1:47:42
updated and added so let's test that application we have tested whatever
1:47:49
how how to work it i'm going to add the new student uh I'm going to add the student
1:47:55
Steve address
1:48:01
India mobile number something like that hit save button here it's working
1:48:07
perfectly it's working perfectly it's working if you edit the record click on this Steve
1:48:14
yeah I'm going to Steve just something like that click save suit and record updated successful it's coming along
1:48:22
with the time also it will be this a professional way to do the records
1:48:27
perfect now I want to do it another thing is I want a confirmation box i
1:48:33
want the confirmation box as well okay the when you click button okay we need a
1:48:39
confirmation right yes or no so how to do the thing is that also there for the example there are many
1:48:48
example you can you just try out all the things okay I have sir don't save don't
1:48:55
save here there are many example you can see save don't save cancel uh here there
1:49:01
are many things are you sure you can see yes so deal here okay
1:49:06
here this one I am going to get this one I'm going to get this one Okay okay here
1:49:12
this one copy this one control C to copy here this one are you sure you won't be able to here this one but yes deleted
1:49:20
cancel mean it cancel i copy this one i just copy this one i'm going to go
1:49:27
over here that delete let's paste the code so here sweet alert so here this
1:49:34
one so I already check it now here this is our API delete set the delete this
1:49:41
one so here how to paste it this one we have a confirmation box so what you're
1:49:46
going to do is so we can't paste directly here so we have a confirmation box so you have first confirmation box
1:49:53
you have to paste it here right so you have to paste it over here so we have to check it right uh if
1:50:03
the if you click yes the record need to be deleted if if it is no it it it it
1:50:09
won't delete okay so here are you sure the text I'm going to change this one as
1:50:15
do you want
1:50:21
to delete this record you write the confirmation text
1:50:28
correctly uh this one all the things are keep as it is after that what you're
1:50:34
going to do is we have do another simple stuff uh here if this if is started here if is
1:50:42
closing here you have did another else condition else what I did here is so if
1:50:48
here the result if you click yes it's coming as a result it it is confirm you
1:50:54
have deleted else if if it is denied there's a function the same function denied it
1:51:01
will be keep save in your table the changes is not there so you no need to
1:51:06
write you just back to your app so here you can see here we try out this one
1:51:13
right here this one okay you try out I go above you can
1:51:19
see the above there I say LC this one you just take it off this one instead of
1:51:25
right very simple you just take it off this one I just place
1:51:31
it perfect okay here this function say confirm okay the this function say it's
1:51:38
denied the save is denied if I click no the save the this uh this one if it is
1:51:45
no it it won't delete directly so it is denied the changes are not saved perfect
1:51:51
that's the thing you have to write now this API where you going to apply it here is this just copy this
1:51:59
one okay it's copied so I'm going to apply it over
1:52:05
here if it is confirm confirm confirm I'm going to
1:52:12
this one I Just the the subscribe is starting here
1:52:17
it's closing you just cut it over here you have to paste it
1:52:23
here right perfect now this get all function you just this this text we now
1:52:29
needed instead of this we are doing this okay so deleted so this text I just cut
1:52:35
off here you have to paste it over here that's the thing I write after that this alert box I'm going to delete that
1:52:43
this this s after delet the record we have to refresh the table so the refresh table you have to create it here after
1:52:49
the alert so alert get rid of this uh spaces
1:52:57
right perfect okay now this one this student write this one right so here
1:53:03
that's the thing you have to write okay now here if you click yes what you're going
1:53:08
it goes to the respective API and delete that account that's here it's after
1:53:14
delete that you have to the message will be pop up deleted
1:53:19
successfully if it is yes if it is no it's not look at this code it goes to
1:53:24
here access denied the record is keep on your that's the thing we have right so let's save and bring back to our
1:53:32
application now we can see here if you click delete this is a delete button click on
1:53:38
this if you click here if you click this if you click this here it ask do
1:53:45
you want to delete this record you click this do you want to delet this record here it
1:53:51
ask you can see so I want to leave so if you click on do you want to release this
1:53:57
record if it is cancel it keep on your table okay if it is here no cancel this
1:54:04
cler keep on your table here it's work okay right if it is cancel it's cost and
1:54:11
execute this it's keep on your right so now let's look at that if it is click
1:54:18
here whatever can deleted here record has been deleted from the table now I want to
1:54:25
delete this kumar if you click on this task confirmation box do you want to delet this record
1:54:31
yes delete it here record has been deleted successfully perfect it's
1:54:37
working perfect i hope you guys you understood the things well now we have to do one more thing is a clear button i
1:54:44
will see in my next video tutorial thank you for watching hi welcome back in this video
1:54:51
I'm going to teach about the clear button so how to make a clear button when you type it you want to clear so
1:54:58
you have to clear you click on this one it it it will be clear okay the FM has been clear so how to do the text go to
1:55:05
your project go to your compass component here we have the button you
1:55:12
have to go above there's a button here save after that we have a clear button here this method you just copy this one
1:55:20
paste it here you have to make this one as a clear you have to call as clear
1:55:26
so if you make the function here you just copy this one simply you have to go to the student component TS file this TS
1:55:35
file right so I'm going to make the function
1:55:41
here open and close bracket you no need to do anything else you just go to get
1:55:46
the code from somewhere else here the update also after update the record the form has been clear so the same quotes
1:55:53
you just copied this all the code you just copied copy it okay we have to clear
1:56:00
everything table and everything clear you have to clear it put it here that's
1:56:06
it the table if you have clear mean totally the form is clear the table is clear now all the form data and
1:56:13
everything should be clear if you click clear but if you accidentally click
1:56:19
update also you can clear all things should be perfect that's the thing you have to write file now let's back to
1:56:26
application here you click accidentally click click the application
1:56:32
accidentally now I don't need to write anything click on this clear it will be
1:56:38
clear application is clear perfect now I want to make
1:56:44
this here in between this header and form we need a small space between that
1:56:50
so how to handle this one simple you have to handle it go below i'm going to
1:56:56
break the break statement so
1:57:04
break let it put the break file save bring back the
1:57:12
application simple right now here we have a small smelling mistake we have to
1:57:18
uh change it student create student table so create
1:57:27
student right so this is simple style we have to apply this one if you want to
1:57:33
make it as another things you have here you can see the light you can make it as
1:57:38
dark and see whatever that's another thing as a dark style you can make it as
1:57:44
dark this one also dark this one also the dark control S to
1:57:50
save bring back to the application here it's look like this so
1:57:56
the rather than this that is a beautiful okay you can have a nice look here okay
1:58:02
this this it is look beautiful the light so I'm going to make it as uh you have
1:58:08
to undo it light is the best one I so let's save here this is the best one
1:58:16
right perfect i hope you guys you clear about the
1:58:22
application if you have any doubt you can ask me anytime thank you
Jobs & Education
Computer Education