Up next in 10
Inventory Management System Angular Step by Step
2K views
Dec 1, 2024
Inventory Management System Angular Step by Step Source code : https://www.tutussfunny.com/inventory-management-system-angular-step-by-step/ Buy the Source code here : https://bit.ly/3CPWaWo #inventorysystemangular#posangular#angular
View Video Transcript
0:00
hi friends welcome to Tor funny Channel
0:02
today I'm going to teach how to make
0:04
this simple inventory system using
0:07
angular so here you can see this mobile
0:09
response you so you can see here this is
0:11
you can enter the product name uh so I'm
0:14
going to enter the product name toy
0:17
price I'm going to enter uh 1,200
0:20
quantity I'm going to select as
0:23
two click add button here it is added
0:25
successfully onto the table the uh the
0:28
total has been calculated
0:30
final total the another one is we have
0:32
to order another item which is a shoe
0:35
the pair of
0:36
shoes uh price 1,000 quantity I'm going
0:42
to buy pre quantity here the amount has
0:46
been displayed here click add button it
0:49
added the table come successfully the
0:51
main the final total has been calculated
0:53
successfully okay after done the PA you
0:55
have click complete all things up here
0:57
okay if you learn this one step by step
1:00
all the system you can Implement in your
1:03
project okay this is the angular project
1:06
so how to make this project sub byep
1:08
will te so first what you going to do
1:11
this you are going to go to the source
1:13
code I provide you first I'm going to go
1:15
to the
1:16
Google first I'm going to install the uh
1:20
I'm going to
1:21
write uh to go to Google and
1:27
type with so first we have installed the
1:32
angular wi width so this is the
1:36
framework so click on this we have to
1:37
install easily through this framework
1:40
using the WID okay so that that's why
1:43
I'm going to bring this framework so
1:45
here click get
1:49
started you to click get
1:54
started okay now here you can see here
1:57
this is the WID so you can see here this
2:00
is the withd creation part okay now now
2:03
you have to copy this command for
2:05
installing the angular so you have to
2:06
copy this you have to go you create the
2:10
folder I have created the folder and you
2:12
project open up open up the command from
2:15
window paste this code press enter key
2:18
on your keyboard you have to it ask the
2:20
project name so I'm going to write PA
2:25
system press enter key now it ask the
2:28
framework which framework so I'm to
2:30
select as here you have to select here
2:33
up up and down arrow of your keyboard I
2:35
have to select the angular the angular
2:37
percent key select this first one
2:40
angular perent
2:46
key it ask you go along with the CSS or
2:49
scss I'm going to select scss this
2:52
advance of Advantage Advanced version of
2:55
CSS press enter key it ask you to
2:58
generate the service side you have to
3:01
you have to give here yes or no so I'm
3:03
going to select no okay if you want to
3:07
go to Sr SSR you click enable so at the
3:11
moment I click select no press ENT key
3:13
on your keyboard okay you have wait
3:15
until the process
3:18
install now I'm now I have already
3:20
installed successfully now I'm going to
3:22
type
3:23
CD for
3:26
system I go inside this folder I'm going
3:29
to type Cod space do to open up my
3:32
project in
3:35
V this project what you going do is
3:38
here here I'm going to take SRC this is
3:42
the angular which is a single page
3:44
application so you can see the
3:47
angular uh this the latest version I
3:49
have installed so the appro the appro
3:53
it's calling the go inside the folder
3:54
there is a uh HTML component CSS and TSS
3:59
this is more important things these two
4:01
things okay this is a logic we are
4:03
writing this is the designing we are
4:05
writing okay so when you run the program
4:08
you go new terminal open up the new
4:10
terminal you type NGM NG come on to run
4:14
the angular project now you can see the
4:16
output what would be the
4:19
output now yes you have to press yes why
4:24
now here you can see here the thing is
4:26
it's running
4:30
now you can see the sport is
4:43
generating it's building the first time
4:46
it will be building after that here it's
4:49
it's
4:50
simple copy
4:52
this I'm going to paste on this browser
4:55
open up the browser and paste on
4:57
it now here Ang project is trying
5:03
successfully now you can see that trying
5:05
successfully you can see the dashb now
5:08
what you're going to do is here here I'm
5:10
going to explaining this here this is
5:11
your app. HTML file so this is the
5:16
index.html file first this is the single
5:18
HTML file it's called the component when
5:22
you work with angular these all are
5:23
called as component each and every part
5:25
which are called as component Bas it's
5:27
working as a component base okay so how
5:30
to do the things here we have to call
5:33
the CSS so how to call the CSS here go
5:35
to
5:37
the uh Google and type
5:42
boot click on
5:45
this okay now I'm going to go to the
5:50
documentation
5:53
download copy this min.
5:58
CSS paste inside this add
6:03
attack save
6:06
all how to go to the app do component
6:10
control a to select all the HTML file
6:12
I'm going to select delete them now I'm
6:15
going to go to what you're going to is
6:17
here here I'm going to this is my
6:20
project all the HTML file is there in
6:23
the here I'll be explaining don't worry
6:25
just copy and paste this all Source I
6:27
provide you don't worry this is a TS
6:29
logic TS logic here what you're going is
6:32
this also the we have having uh here
6:35
this one TS logic here TS logic you have
6:38
to copy this all the
6:46
command just on it now here I'm going to
6:51
here this is the Imports Imports in
6:54
angular latest version we know there is
6:56
no app mod so here inste of that the
6:59
form also important form import part we
7:03
have done by this all things you have to
7:05
import by like this in this Imports what
7:07
are you do this Imports you have to do
7:09
it okay this here it's not error it ask
7:12
this one the route out we get rid of
7:14
this line so here this one I'm going to
7:17
import the forms ng4 I need ng4 I want
7:20
to import this class this take care of
7:23
it okay okay so so first you have to
7:27
install here this is the simple this is
7:28
the programming Design This is a logic
7:31
me a coding so here you can see you can
7:34
see this is the heading I have written
7:36
simple form design we have written in
7:39
angular okay so when you click this is
7:42
the NG model when you type something it
7:45
it be store in the name when you type
7:47
some store the price okay that's how we
7:50
have Del this one this a total
7:53
calculation if you click add button the
7:55
the when you uh type something into the
7:57
text box click add button the capm
7:59
should be added into the below table
8:01
this a below table it has a name price
8:04
and quantity should be added and uh some
8:07
will be calculated what is the price and
8:09
quantity you entered based on the price
8:11
and quantity the the total has been
8:13
calculated okay so here this one should
8:15
be the total calculation part so here
8:18
here this is the uh final button this is
8:20
the final total will be coming and
8:22
display a refresh page this a refresh it
8:24
you click complete button okay so here
8:26
when you click add add products it goes
8:29
to that s file at products function here
8:32
the product name price and quantity all
8:35
things are retrieving here this name
8:37
should be match with this
8:40
name here this name here name this NG
8:43
model name this quantity this price
8:45
everything here this NG model okay it
8:48
was coming and you have to pass it over
8:51
here it's a sum everything after it will
8:54
be adding here to the table after it
8:57
calculate the calculate and reduce just
9:00
calculate the total okay after that
9:04
after done it if you're clear it will it
9:05
will be clear after add this one your
9:07
all things should be
9:09
clear okay so here run this pause here
9:12
the pause uh if you're
9:15
running here nothing nothing happen I I
9:18
haven't save it I save this
9:21
one what
9:27
happened def default
9:34
it's running I'm going to save
9:37
project uh save
9:40
it bring back to the here it's working
9:43
now here you can see enter the product
9:46
name and quantity click add button here
9:49
it is is it is clear that's the thing
9:51
you have did it here after this one it
9:53
should be clear everything here it's
9:54
clear this field is
9:56
clear after click refresh button just
9:59
complete
10:01
button it goes to function refresh it
10:04
this refreshing function what does is it
10:06
should be clear everything of the form
10:08
that's thing you have did it it is
10:10
calculate the total sum and price and
10:12
quanti calculate based on that one
10:15
everything is calculated this all all
10:17
source code I provide in my video
10:19
description uh my I'll give you my link
10:22
you will be able to get them okay to use
10:24
it only you have these two files is very
10:26
important stuff you have to uh there at
10:29
the design part you have to import the B
10:31
strap as well this is very important for
10:34
okay I hope you guys you understood
10:35
things well if you any doubt you can ask
10:38
me thank you for watching
#Retail Equipment & Technology