hi everyone welcome back to the angular
project series my name is Anil and this
is our eighth video so first of all
let's look out the points of this video
so the topic is how we can just clear
the form and show a alert message when
data is entered okay so what we are
going to do for that we will use the
bootstrap alert here when the data has
been submitted so we have to just show
here alert that that I successfully
entered and after that we have to make
our close function to that on the cross
button click we can just close the
warning here otherwise this will be
shown or whole time and after that we
will also see that how can how we can
just clear out this form after
submitting the correct data all right so
guys this is basically our eighth video
if you did not watch or a previous seven
video then maybe you have some you will
face some difficulty to understand this
project so I am going to recommend you
that we have to watch for previous all
videos and the link is given in the
description box alright so now let's
start with that so first of all just
showing the would stop warning because
woodshop provides a very good UI we have
to just search for it so just right here
bootstrap for alert all right and you
can just click on alerts bootstrap which
is the second link and there is already
a lot but there is a no close button for
them that's why I am NOT going to catch
up them so you can just use this one we
have already a color close functionality
here so just use it and directly paste
it inside of this file oh sorry this is
our PS file paste it in the HTML file
here so we can just make it directly put
it here
and now let's check out the UI what we
are getting here so you can see that we
are getting a UI here but let's change
some color because yellow color is look
like it's something warning at all which
you can just put here success and we can
also change this text line so just right
here
success
disuse alert and we can just put here
some more text like data is data like
your data has been entered or yes
entered successfully all right so after
this let's check what we are getting
here this one but we don't want to show
it on every time we just want to show
when that eyes entered here so that we
need to just apply some more conditions
here so in the TS file let's take a
property with the name of alert and it
can be a boolean type so just choose by
default false so that it should be not
shown by default so this use here we can
just hide this bar so that we have some
more place to look out ok so just use
your star ng-if and here we can use the
alert sorry a lot property if a lot is
false then it will be not gonna show
like this all right so when it will be
shown when that I successfully entered
so just remove this one and here we can
just write simply this dot a lot is to
all right
so after just submitting the data it
will be show all time but we also want
that there is a cross button on the
cross it should be hide so that I am
just going to make one more function
like close a lot like this and here I
just want to write here this dot alert
is false
all right and now this function will be
called on buttons click so we can just
simply right here click
and let's call this function with the
click event and for the click event
let's make it bracket around it like
this now this is a perfect click event
also but I just want to change this line
also because this is not relevant here
so just write here add new restaurant
like something new just ranked all right
so this is okay yeah so one more thing
that after this which is the last point
here if you want to clear the submit
submit form after just submitting the
data for that we can do one thing
whenever everything is has been done
then we can just call this tort reform
name which is the address to dot reset
and we can use blank object inside as in
parameter all right so everything is set
so now let's try we don't need this one
also if if you want we can just also
close it and these functionality can be
done inside it also ok after that lets
open up a DB file also so that we can
look out that what changes are going on
here so this is a DB file so here you
can see that we have a six result for
now and now let's enter some new values
like natural food natural food something
like restaurant name and email id is
also natural natural at the rate test
others can be Greater Noida they don't
know it ow
and that's fine let's try to submit it
whenever I'm just going to submit it now
you can see that we got a successful
alert message and form is also also
empty here so the data is entered here
with the ID seven and you can close it
now you can see that this is also
working fine and listing is also working
fine here alright so this is the way
that how we can add the mole data so if
you just want to try to add one more we
can also try like spice food and pie
spice iterate - dot-com and address can
be annoyed a sector 124 something like
this okay so this is also working fine
and if I'm not even close it then if I
just go on a listing and I've just come
back this is also gone and submit form
is also empty alright so this is the way
that how it's working if you still have
find that there is something confusing
you can ask them that comment box don't
forget to subscribe my channel like this
video bye bye
take care
