Angular 16 CRUD Operation from scratch using laravel web api | Angular 16 crud tutorial using api

hey guys welcome back so guys in this video we are going to get started with the new topic that is angular okay so guys we are going to create a crowd application in angular using a API so that API is built with laravel application so now guys as simple let's get started with the installation of angular and set up the bootstrap and create all the pages inside the angular okay so first up guys here to install the angular you just need to do the following so before this you need to install one node.js okay so now guys let's just get back to our file explorer where now just open your CMD command prompt okay so I have selected one folder and open that so now guys here I just type CMD on the search so it gives me to the correct path okay so now guys you need to check your node or npm is installed or not so in my system I have already installed the node and npm and now guys we need to check that I have installed the angular or not okay so now to check the angular you just need to add NG space version okay hit enter so here you see I have already installed the angular which is 16 right now okay so now guys let us create the project so as simple let's get back here so here is a basic workflow how we can create the angular project it just engine new and the project name as simple guys let's get back to the R command prompt and here I just give the command NG space new space the project name so I am going to create an angular hyphen card so hit enter it will start creating the folder guys so here it is asking would you like to add a angular routing so I tell yes that is why and then with style sheet you prefer I prefer CSS hit enter so it starts with the installation process and here if you see guys in the background it has created the angular folder already Okay so let's wait for the complete installation of this angular okay so guys here you see packages installed successfully and it's giving warning so you can just ignore All These Warnings guys and you can continue here it's done so here if you see this fatal unable to detect the email address I have not given so that's why it's showing this kind of error okay but our project is successfully created installed so now guys we can just close this terminal done and then you can go into your angular Cloud folder and then open this in your editor so I choose with the vs code editor all set and now guys let us run this application okay so just use Ctrl tilde symbol to open the terminal let me just zoom it okay and now guys just to NG surf hit enter compiled successfully add the low colors 4200 let's control click on it and we see the output here perfect so we have successfully run the application guys and now let's get back and we will be editing it so as simple let's get back to our editor so first step we are going to SRC folder inside that app here we have a app dot component.html we have all unwanted codes so you can just remove it just go below select and remove everything except the router Outlet and now you want to keep this in a open and close div tag inside that will keep it in a H1 tag home page okay which means main page now if you save refresh perfect so we have got the output guys and now let's get back and set up the bootstrap so just open new terminal and install the bootstrap so what we can do let's go to getbootstrap.com so get bootstrap.com and copy this command okay so just click on it paste hit enter so it installs the bootstrap so guys bootstrap installation is done now we can get back to this served and now guys you can just go to this angular.json to link the bootstrap let's save this and here in the first step you should go on the architect build and inside that build you find option inside that option you find the CSS and the script so here it's already given a default style CSS file so here it is and now I want to add the bootstrap so to link the bootstrap file you can just find that inside your node modules you just need to search Ctrl F search for the boot strap verifying bootstrap dist CSS and you get that bootstrap Min dot CSS file so where it is here we go okay so let's copy the relative path copied and now you can paste here so same way guys you need to search for the GS file also so what we'll do we'll copy the bundle dot Min dot JS file so let's copy the relative path and you paste it you need to break it double quotes and paste it done guys so now let's arrange this file and you do not need to include the node modules so just remove that delete it and start giving forward slash instead of backslash all set now we can save it and close this now you can just use a simple button to test that the bootstrap is working or not here click me save it and now if we see the output here we see a normal button and if we give a class for this button button hyphen primary save it and then you see the bootstrap okay it has not linked correctly let's save it once again I think we need to reserve that because we are editing the angular.json file right so for that sake we need to reserve just Ctrl C and NG serve again done and now if we refresh awesome guys so it's working fine so what whenever we do any changes in this angular.json file you need to reserve the application now let's close it so here if you remove the class you see normal bootstrap if you serve it the bootstrap okay so now guys we have successfully included the bootstrap also and now let's begin with creating the pages so as simple let me delete this folder vs code we do not require so now let's get started with creating the components so you can move on then new bash or a new terminal where we'll create the component using angular commands so NG generate component which is home page so for that I will create inside the pages folder so you should move inside the app inside this app will be creating the pages folder so let's tell Pages forward slash and then home page okay let's hit enter perfect let me Zoom it guys and now you see inside the app folder we have a home page and inside that home page we find the component okay so what we can do let us open and close div and use the H1 tag and tell home page so same way we are going to create for about and contact us also so let us use the same command NG generate component Pages where you will tell about Page hit enter and same way for the contact page so let us just create all the components of pages okay contact page so if you go inside the page we find all the three components that is home page about page and contact page as simple let us copy this and now we go to about page and go on the HTML paste here and mention about page and then we go for the contact page go to con contact page.html let me show you the correct file names so make sure it's dot HTML guys it's not any other file okay so here we paste contact page save it get back so now guys I want to call the about page contact page and other pages also so for that you just need to add the routing okay let's arrange it let's close every file here done go to SRC and app inside that app you find the app routing module.ts file so inside this only we are going to give the routes so inside this array let's hit enter and open and close curly brace where inside this curly brace you tell the path colon you do not give forward slash okay anytime in this application in the beginning so you just need to give null that means it accepts as a home page and on this Home Path what component you have to give so component colon what is the component so it's my home page that is home component okay so what you can tell let's tell home page component hit enter so it's automatically it's importing the class if it's not importing please import your path and on this page only I want to set the title so for example if you see right now what title here it is it is telling angular crud right so I just want to set the home page so you can add a title colon home page so given in a single quotes let's save and then you can just copy and paste so it goes to the about hyphen as which is about page so it's not imported guys sometime it's import sometime it doesn't so what we'll do we will import buy manually so you can just about and change the page done guys so if you see the path is correctly called so if you just Ctrl click and it goes to that component right let me close it so same way guys for the contact also let us to that contact us and here you set the title contact and about us contact us and the component also you have to import so contact page component hit just hit tab so it Imports automatically now let's save so now guys let me copy this route and get back on the browser so if you paste slash about us you see that about us and if you paste contact hyphenus you get contact us okay so what is this home page you need to remove that from the main file that is your component.html let's remove it so it works correctly simple guys now if you give here home page home page perfect and you see the title also it's changing so let me add about hyphen us so you see the title also changes to about us perfect guys so now guys as simple I just want to create one navbar to navigate through the pages so what we'll do we'll just create a simple component in the partial folder so which will be inside this pages so just type NG generate component inside the pages forward slash then partials forward slash the nav bar hit enter so you see that partials folder inside that partial you have a navbar component awesome so now as you can go to this navbar.component.html file inside that HTML you have to paste the number code so we have already installed the bootstrap now let's go to the docs and just search for navbar nav bar hit enter so here we get the nav barcode as simple let's copy it and get back now paste so now guys here we do not required few things let's remove those and yep so as simple let me show it correctly here and this is my URL tag so you can remove this also and this will be your home page and then about so see we copy and paste for the contact us and this will be the about us and now guys how to link the routes so you just need to change this href to router link so add a router link copy this paste here paste here and here remove it and make it to forward slash and here forward slash about hyphen s then forward slash contact us so same way copy this and paste on your navbar done guys let's save it and here you can tell angular crud and now let's import this number component inside our main app component so let's go to app component.html file on this we can include it so how to include a component okay inside another component right so for that you can just add app hyphen then the nav bar that's it now you can close the and it's imported let's save it and now you will be seeing the changes guys awesome so now guys our navbar looks very simple let me just add a few styling inside that I just need to add this simple shadow and let's yeah add this BG white that's it and from margin and auto to margins dot Auto let's remove this container fluid and make it to container only now if you save and check the output awesome and now let's redirect here home about and contact perfect guys so guys we have successfully learned how to install the angular application and integrate the bootstrap create the pages and set up the navbar to navigate through the pages okay so now guys in this we are going to start with how to insert the data into our database using laravel API okay so guys we have already seen that how to install the angular and create the project how to navigate through the pages in the previous video okay so now let's get started with directly creating the student page and its form for the insertion of data so now guys let's get back to the editor so as simple now make sure your NG is served and then let's go to the new bash and just create with the new student create component okay so NG generate component the I want to go inside the pages which I have already the pages folder here inside that pages I want to create a student create okay hit enter so here are my components created okay so now guys you can just follow here student app pages and student create and inside that we have a student create.html file okay so now here open and close div get started with H1 tag and this tell this as student create page okay save it and now we want to access this page so for that you can just go to the app routing dot module.ts file and inside this we are going to add the create a route okay so let us tell student s slash create simple and we go to the student create page okay so student create component okay so the pages also is imported and here tell student create let's save so now guys let us copy this route and go to the browser and paste it so let's refresh here on this student create page awesome so now guys let's begin with the form design so to get back to your student create component where you are moving to the HTML and here is a HTML file done so let me just show you in the sidebar a simple so now guys add a container and inside this container I just want margin top 5 get started with the card card header with the headphone tag where student create and a simple a tag for the back button so right now we are going to give the Home Path and here router link okay and let's design this button button Danger and this should be floating to end and then guys after the card header let's go to the card body and insert this card body your form starts so before that let us check this output let's save it and get back refresh and here is the output guys awesome and now guys let us create all the input Fields so what are the inputs fields we are going to create so let me just show you in the database so here is my table guys which is name course email and for these are the four columns which we have to create as an input field and those input datas we are going to pass through the API and insert into this database okay so now guys let's get back to the form so form adding a margin bottom three a label name then input dot form hyphen control let me just zoom it so we end this then guys you have to give the name attribute equal to name this will be the field name and same way we have to pass the mg model so NG model hit enter so this is a process how it comes now you have to pass name so now guys same way let us copy this and paste it below for other four fields course okay paste your paste here and make it small done and email and then finally the last input that is four okay let's paste your phone done and now guys one more thing required a button okay so a simple button which will be save and let's design this button with the bootstrap class button primary and this button is going to be a type of submit submit all set so on this button click we have to do the NG submit okay NG sub MIT equal to and this will be inside a round bracket and here you have called to a safe student function as simple guys now the first step you have to go back to your the student create component.ts file let me show the filing also okay so this is a file and inside this file we have to specify all the form field names so here let us still Name colon which is going to be a string and then the course colon string email colon string and then phone colon string are simple so these are the four names which we have to call inside the form so this will understand but right now what it is telling here it is not able to get any data so for that you can just add this not symbol before each variable paste here all set guys so we have given all the variables and we get back to the HTML form so still we are getting the error here it's telling about the model so if you going to use NG model or NG submit you have to import some classes so you just need to move on the main app.module.ts inside this Imports you have to add that classes okay so that is nothing but the form forms module press Tab and it puts its class here okay so let me just push this at the top so it should be clear so now guys you have imported this form module and because of this your all unwanted errors goes close this file and then guys here you just need to copy this function and you need to move to your student create component.ps file and inside that only you have to create this function so now guys when you submit the form you should get all your input details so what we'll do we'll just keep inside one variable so let's tell where of input data equal to open and close curly brace and inside this we are going to tell this will be my name and then your this dot name okay this dot name is nothing but the variable what you are taken here so same concept CV then go for the course and this will be email and finally a phone so guys make sure you are passing this the correct name as per the API records so if you see in my API code let me just show you so this is my post of student control where I am going to save the data so here are my field names okay here are my input requests so whatever request I send from there it reads over here name course email and phone this data only will be over there okay so ignore that part guys if you want to learn about this how to create a API then you have to learn through this laravel and then come back to this and now let's do the HTTP call request so guys what we are going to do we will be taking a service from that service will be using the HTTP call so as simple let's get back to a new terminal so let's create a service in the angular Ng generate service inside the services folder I am going to create the student and hit enter so here you see let us go inside the app and inside the app you find that service service that is your student service so here will be all your HTTP calls so let's create one save student function and here you will get the input data and any we can send or if you are sure you are sending an object then you can type the object okay so if you see here we are sending actually the object on this this is an object variable so you send this right you can tell that in the student service yes I am sending the object on Save student function and let's return and here we are going to call the HTTP client so before that you need to import that HTTP client in your app module.ts so let's go to app.module.ts file inside that here we are going to import the HTTP client module so just use comma and add that HTTP client CLI e and t client module and now you need to import this copy this and import use import open and close calibrase and this will be importing from the angular common HTTP and you need to and now you can use this HTTP client module inside your any pages so now you can get back on the service so we are going to use service right so here now in the Constructor let's call that HTTP client so just use private http client colon the http client hit tab so here is the HTTP client imported and then use this HTTP client for the requests so this dot HTTP client dot the post method so we are going to save the data right so we'll be using post method to save the data okay so why I am facing this error oops so here you see I have pasted inside the wrong it should be inside the Constructor function guys okay not inside the curly price as simple and here till symbol and get the API URL so my API for this route so here you find this two dents on the post method it goes with the students so you have to paste the complete URL so right now I will just check out on the browser I have already served the URL guys so you can just copy this complete URL get back and paste here so perfect and with this only we'll be sending the data so what is the data it's the input okay so here you copy this input data and send it that's it guys all set let's save it and now you can get back to the form so on the student create component.ts file here you call your service so you have to create a Constructor Constructor open and close bracket and open and close calibration so now guys inside this Constructor you call your student service what service you have created here okay so let's tell private that is student service colon the student service okay student service so here if you see that it is imported on the correct file let us just go to that path so here you find okay so now guys you can just get back again and done so let's copy this and here let's begin with this dot student service dot the function name so it's already suggesting it that is to save student function dot subscribe function and here inside the Subscribe open and close curly brace and use next colon function and open and close so guys this is a new updated in the HTTP subscribe okay so now here you get for the error colon open and close function open and close curly brace so here you pass the error and this will be a response so res response so whatever response you get you just need to console.log here so response and what kind of response you'll be getting I don't know what kind of response I get so I just put any and what kind of error also I get in the response I don't know so I'll put any Here and Now guys in this inside the save student function it is asking for some data over here so what data that is nothing but our input data we take that and pass it inside this function and this student save student function goes to the student service which is calling that HTTP client post request okay so now get back and copy this and paste inside the error also so let's tell error error comma here these are errors and this is the your response so response okay let's save it so now guys you get back and refresh here and make sure you inspect your console log and now if I click on directly on Save let's see what happens click save so here you face guys that the post request of this URL is Port 22 okay unprocessable content so which means it's telling all the input field is required so I'll just show you in that if you go inside your network and just move to that student you find that errors okay so this is the errors and you might see in the console log also that is your errors which is the and here inside that error error and errors so we need to get error dot error dot errors and then all the column field names so as simple let's get back here error dot error Dot errors okay so we need to keep this in one variable so we'll tell this dot errors error OS and here we paste so now you need to create one array for this let's get back on the top error colon any kind of data it might be and it should be a array a simple guys and now you use this inside this dot errors and get all the error list as simple guys and now let us just use this inside the HTML form to view the error list okay so go to your student create component.html file and just below your input tag use the span tag and insert that span tag NG if condition so this will be errors dot name and let's copy this and you need to show inside open and close curly breast error.name and here let's use our text Danger and let's paste here same thing for the course paste it paste it let's copy again for the email let's copy paste paste same for the phone copy paste and paste save it guys now let's get back and refresh once and click on save button so if I click here you find that the name field is required the course is required perfect and now if you type anything click here save so it goes the error also okay now guys let us submit with the correct data enter um prakash BCA home at gmail.com here 10 digit phone number okay one two three four five six seven eight nine ten and now let's click on save so what will be the response so here you see guys that we have got the response in the console log and in that you have got the message that is student created successfully so guys once this record is created we want to empty all these fields and I'll show the alert message so for that you can just get back and move to the component.ts file so here inside this success just use the alert function response Dot message and once the data is saved we need to clear the input field this dot name equal to null as simple same way guys for all other fields which is course email and phone save it all done guys and let me just show you with one more saving record so before saving one new record I just wanted to set a loader type okay so when I click on this save button it should show that it is saving and it should show a loading option so for that guys you can just use a simple spinner from the get boot strap let's go to the docks and here spinner so here is a design guys so we are going to use this so what we can do let us create a component okay so we can use it in the further crud Okay so NG generate compo length space and you go inside the pages partial inside this partial I want to keep that loaded so Pages forward slash partials forward slash the loader hit enter okay so we go inside the partials we have that loader awesome so let's go on this component.ts file and paste it the HTML code let's paste here all done and here you pass a title guys so if we send a custom title so that time it should show what title we have passed to access this title you have to go to your loader and inside this you just need to paste that title colon it is a string so let's mention that it is a string equal to inside single quotes let's tell loading so by default we'll keep the loading only and you can get back again here and just add dot dot dot okay so we are setting this by default loading and now guys you can get back on the student create component dot HTML file and before the spawn submit let's create one div tag open and close div use ngf okay NG if where is loading okay when it is loading you are going to call your loader component so just use app hyphen then the component name that is your loader okay and this loader so if you want to pass the title you can just add a coolant title here okay equal to the custom title okay so I will mention loading title and now guys here I just want to add the else condition also okay so just give semicolon use else and this will be your else block okay not block else let's keep it else form okay and now you have to use a NG template template let me break this so we are just going to remove everything we don't need these things just use hashtag and paste that else form okay and now you paste the complete form inside your NG template and now what you have to do we have to create this is loading and loading title variable inside your student create component.ts file so let's move on the top and here I tell that is loading colon which is going to be a Boolean equal to so by default it will be false and now you copy this and just go below so when the student save is clicked that time this dot is loading is going to be true okay once it is Success you are going to tell is loading will be false okay make sure you are doing after clearing the data same with the error part also so here once the display error and set it to false as simple let's save and now guys let us check this output so before checking the output we are missing one more thing that is your loading title okay so let's copy this loading title and get back here so once this save student is clicked this dot loading title equal to inside single quotes we have mentioned that it is saving okay I think we did not create a variable let's create that also loading title colon equal to string by default we will set it to loading itself okay let's save it and now let's get back so yep once refresh and now I'm directly going to click on Save so here you see the loading shows perfect so I see one extra bracket I don't know where this is let me just check out let's go on the HTML so here you see guys that extra thing let me remove that okay all set let us save and it has gone awesome so yep guys so guys we have successfully seen that how to insert the data into a database using laravel API in angular so let me just show you in the database awesome okay so guys in this video that's it and let's continue in the next video how to fetch this data from your database inside your angular product application with the API okay so now guys in previous video we have seen how to create the data or insert the data into our database using API and now guys in this video we are going to start with how to fetch the data from the database using laravel API okay so these are my data which is stored inside the database and this is the API where we can fetch the data using this API okay so now guys let's get started so as simple let's move to the angular application okay and now let's begin with the creating the component so let me just arrange everything and close all the files close all the files are simple and now guys begin with the NG generate component which is the student page student hyphen page so before student page I just want to follow in the Pages folder okay so you can just add that pag es Pages forward slash then the student Page hit enter perfect so you find that student page and inside the student page we have a HTML component page okay and first we will set up the route for this so let's go on inside the app routing module.ts file let's copy and paste and here we'll just keep the path students and this is going to be a student component okay student page component just click that and this is student lists okay and you follow that path imported correctly yes let's go to that file okay so this is the TS and you find that HTML is over here lets you can move to that HTML file perfect so we are back to that HTML file and here you start with the div and let us check this page first H1 tag student page okay save it and now you can just check on the route students we have got the students page awesome guys so now guys let's design a HTML table to display all the records okay so first let's move back get started with the container where I need to add margin top 5 also and begin with the card design card header H4 tag students lists and inside this a tag add student I mean add student and let's design this button primary and this will be floating to end and here make it as router link let's paste here and this goes to the student slash create okay and now you move to the card hyphen body and inside this card body you start the table design begin with the table add the class table table striped table powder okay then table head table row and table heading that is ID then the name course email then the phone and one created at also when it was created and then let's create the action here and now guys stable body and here table row and this will be the table data and insert this let me just add a static value one so let's save and see the output guys a simple refresh awesome so let me see why this margin top okay here it has come a space now save and perfect so if you go on ADD student okay so now get back so when you click on back it should come to the students page okay so what we can do is just move to the student create component on the back button just add the students and also guys I just want to add on this nav bar okay the students URL so yep let's go inside the partial nabal if you don't understand how all this has been created please watch out the first video that is angular installation and creating the pages okay so move back to your navbar file yep copy and paste until this is the students okay students save it and now you can close the snap bar close the student create and back to the students page so refresh we'll move to students awesome so now guys let's get started with fetching the record using HTTP client so now as simple you need to move on directly to the student page.ts component and inside that will be writing the code first step we will create one variable called students not colon and it will be a student response okay it is any right now like if you get object data or what kind of data you exactly prefer just add now student response and this will be imported from your the student service file okay so inside the student service file will be creating that response okay so you can just add that like export interface student response open and close curly brace and what is the response so I'll show you so this is my exact response guys what I am getting the data let's copy that and paste here Okay so let me remove all these unwanted things and this will be a number and this is going to be a string string so let me just paste it guys are simple so guys this will be getting the response so this response only what we are doing we are going inside the student page component file and pasting here and now we need to import that service so for that first you need to use inside the Constructor function open and close curly brace here we pass like private student service colon then your student service okay so this is my student service so inside this only we are using it so let's copy and just add comma and paste it here that's it guys so here you see you are inside the service from that I am calling this response and pasting it as simple guys and make sure this is going to be array of data it's not a single object okay it's array of data and then now you can take this variable and paste for the loop purpose so what data you are going to give so we don't have any data right now so for that we are going to get the data from the API so on the page load NJ on a net function open and close curly brace and now guys inside this I will create a get student student lists function and now guys you can just create this function here open and close and now guys inside this function we are going to call the HTTP client request okay so for that we are not going to call the HTTP client request we will be using the student service so here this dot student service dot get student function okay so we need to students will mention okay we have multiple data so what we'll be doing let's copy this function name and get back to the student service and create a HTTP call request okay so let's go there on the student service so which we have created in the previous video if you don't follow please follow that and then you can understand what is this Services going on now here you create the get student function a simple guys let us copy this and paste here the same request and make this to get method and the API is going to be the same because here you see I use the same API to get the data let's paste that and here you are not passing any input it's just getting the response okay and now guys this service will use this get students inside your pages okay I'm in student page of your component.ts file from here it will call the data all set from then use a subscribe function and get the response so you can and you get the response colon any let me add this inside a bracket so you get any response this Dot your variable students let's copy this and paste here equal to your response dot whatever the data you get so we don't know exactly from what variable we are getting so what we'll do we'll console the response first console.log res response and now guys let us check the output so when the page loads this calls the on init function and this on init calls this function and this function is calling the HTTP client with the help of student service okay so angular Services we are using it from there we are calling it and getting the data so now guys what we have to do let us get back and see the response first okay inspect so just press f2l it will open the console and if you refresh here you see guys you have got the data it's status 200 and here is the students variable inside that two records are found so let's copy the students variable and get back so response Dot students you are getting okay so this thing only you're going to store inside this variable students awesome so now you can save it and yep so the you take this variable and go to your student page component.html file inside that file you Loop your data NG for and here is your list so this dot students to item and item is nothing but the each value item dot ID the name the course the email then phone and then created underscore at and then finally uh edit button and delete button use the a tag and just add a edit class button button button success for edit and danger for delete delete and what we'll do we'll make this delete as a button not as a attack here it's going to be a button and make this to type b u t t o n button and here let's make it to router link and by default I just redirect to home page let's save and now let's see the output okay refresh awesome guys so we have got the data in that the HTML format perfect so now guys I just want to add a loading part before it loads the data so yep sure insert this table before the table open and close div isor NG if else hit enter just set is loading copy this and this is the template name right and here let's tell else table block okay you can mention in this way so if you want to use this you have to use in a Ng hyphen template close the angle and just add a hashtag inside this and paste that same variable and now you can completely push this table inside your NG template tag and now here you can use your loading part so we have already created the loader component where this is the code okay and the title is already set over here done so now guys let us ignore this loader and add that loader component here okay loader and and the loader that's it guys so now you need to set this is loading inside your component page dot PS so when the students list is called you need to call it this dot student list equal to true okay and once the data is loaded you make it to false so this is loading variable is not created let us add that colon which is Boolean equal to false so when the page loads when the get student list is called we are setting to true save it and now you refresh so you see that loader so guys we have successfully done with fetching the data from our database using the API okay so now guys I just wanted to teach you one more thing about the interface when you get the data from the HTTP client we need to create an interface so that interface is nothing but what type of response you want to get okay what type of respond you want to specify so let me just show you let us remove this and just console the log of response and here if you see that it is telling status and the student so only two data are coming in the response so we need to specify that so how can you specify as an interface in angular so for that let me get back to the service so we are using the HTTP client over here in the get method we are open and close and we will tell Student Response response type so what kind of response type we are getting so let's copy this and create a interface so yep here only will create it export interface oops export interface the interface name open and close calibration status colon which will be a number number and then you can add a comma here and then students colon and what data you get we are getting array of data or object of data you can mention that over here so basically we are getting this response only right so you can copy this and paste here and just mentioned it is coming inside the array okay now you can save it and and get back to this page component and now guys you can remove this any okay because we have already set the interface what we are getting and then you can use in this format so if you refresh here everything works smooth I just want to show you that if I remove this interface so I'm going to remove this let's save it and if you get back here you get a error that it doesn't have anything so we will set that as an interface so here you see you face the error if you just add here any a n y n e so it's except okay any data might be getting so instead of doing in this way we set the interface in the student service so let me just undo here so we are setting that this response will be getting in this format and so you can use this inside your page component okay so this is one interface in the angular so you can use this way or else you can just add any and skip that interface part in that okay so it's at your comfort how you use it so now guys let me save it and let's run again here everything works fine so now guys in this video we are going to edit and update the data okay so basically we as we have this create form same way we are going to for the edit form and update the data from that form and then get back to this page okay so now guys let's get started so first let's move to this edit button yep let's move back to our angular application and here is my student page component where we have listed all the data done so here is my edit button and now guys at this router link I just want to add a route with the name students forward slash the ID and then again edit so here your ID will be coming so let us just open and close double curly brace and just pass this item dot ID so now guys let's create this route so let's copy this and get back to our routing dot module.ts which is app routing and yep guys so let me paste here copy and paste so let's edit here and let me remove it so here we change the path forward slash and then colon ID okay it's your student edit and now we need to create a student edit page let's open one new terminal here and just type the command NG generate component and the page name so I am following one structure here guys so it's inside the pages folder and going to create student edit hit enter okay so all the component is created guys for student edit and now guys let's import that component so student edit component and it has imported the class here we move and now guys you can go back to that student edit HTML page and now guys let's open and close div in a H3 tag tell that edit student let's save and now you can route and see the pages opening or not so let's click on edit and here you see perfect on the edit student page with the correct URL done guys and now guys let us copy the create form and paste inside our edit form as simple let's go to student create student create component.html let's copy everything and paste in our student edit component.html let's paste it that's it guys so now what we have to do let's change the heading edit and here back button it's going to be the same and all this variable also we have to add in our component.ps file and now guys one thing you have to change here instead of save student let's make it to update student so it's going to be the same input Fields same error Fields all the save button now let's rename this and save to update okay so save it and now guys you can just get back to the student create component.ts file and let's copy the variables whatever we have there so now guys let us just copy these three variables and let's get back to our edit component.ts file and paste it done so now guys I just want to create one a variable called student so student not colon any so now let us copy this variable and just paste inside your form okay student edit component.html and there we are calling directly name here right so we'll be calling student dot name okay so we are going to create in this format so let us just update that student.name student dot course email and student.4 that's it guys and now guys you can get back again to your component so now here we start with the fetching of data so first step what we are going to do on the page load we need to get the ID of this URL okay so from this ID will be getting it let's get back so guys NG on init function this Dot student ID okay we don't have a variable let's create that student ID variable here D naught colon any or just add number also it's fine so I'm going to add a number because I know that I am getting the ID so now you use this here equal to then your router so for that you just need to use this active router use a Constructor function open and close curly brush inside this function is a private route colon your activate route okay activated route so if you just press Tab and here the class inputs okay so it's imported and now guys with this help of a route we are going to get the ID so this dot route dot your snapshot dot param map dot get function from that get function I mentioned its ID so make sure it is you are giving ID only y because you are passing it here as ID okay so here we are facing error like type string null but assignable two number let's make it to any okay so there will be no warnings now guys let us console log or just alert it let's alert the student ID save and now if you refresh okay here the edit is oops it's showing for this function let's create it so it's not an issue let's get back to our student edit form on the form tag here we have a update student function let's get back and just add that function open and close calibrace let's save it and now that has gone perfect okay so now let's go back let's click edit on id2 so here you get in the Alert 2 okay and then you get the form awesome guys so now you can get back so we have got the ID and now with this help of ID what we'll do we'll get the single record of the student so for that guys we are going to use the student service if you don't know what is services in angular please watch out the video that is how to insert data into database in that I have explained how services are used okay so now I am going to use this service here so let's get back to student service and let's create one function get student so it's just single record I'll create student only and now let's return this dot call the HTTP client that is your HTTP request and use the get method and inside this get method you paste your API okay so my API for getting the student record is let me show you here is the edit option copy this and get back to our angular and paste the URL so my complete URL is this so yep pasted and here we need to pass the ID add a dollar symbol and send the ID so let me mention that is student ID and here you get from this variable student ID and here just pass any so any data you might be getting or if you know it is a number then mention it's a number guys okay and now guys let's get back to the student edit component.ts file so I reach there so now on this function on the page loads I want to call that student service from that student service we call get student function so now you need to add here in the Constructor private student service colon student service okay just Imports its path correctly it is already imported so here we move there and you see that we are already on the same path perfect so now guys let us copy this function and get back to our edit student so here you use this Dot student service dot your get student function and inside this get student function we need to pass the ID okay so we are sending the ID we are getting the API response and from there what you have to subscribe so when you subscribe here you get the response colon and open and close calibration where you mentioned console DOT log the response and you need to pass inside the student variable also so what you are getting first we need to check that so let's get back and just open your console developer tool refresh so we are getting errors guys that is about the input errands okay so it's not able to read that name but we have got the response here whatever we did the canceled log so here you see in the response we get the student variable inside that student we have some records okay some input field data so these data only we are going to append in that student variable so what we'll do we'll get back call the student variable this dot student equal to response dot student okay so when you get the response you append that student okay so this is a student and now so guys we are facing error so it's telling that I don't find any value so before that only it's throwing the error so what we can do there are two ways you can either use any here and sort the issue in the function and now the error has gone and you might be facing no errors refresh okay you have got all the input Fields okay so guys here if you see we are still facing this error but the data has come so before it gives the data it is already compiled that I cannot find this detail so there are two solution guys for this either you give it all the details like use curly brace here equal to and tell that name equal to null in this format or else what we can do we can just take this variable and get back to the edit HTML and here in the complete div let me open and close just add NG if condition if this student is loaded okay if has any data that time you show all these input Fields okay let me push this and here you end it that's it guys as simple save it and now you might be getting no errors refresh awesome okay so now guys we have got the data so here you see and here it is appended now let's get back so what we were working on here so there are this is one way and now guys what in case if you don't want to give in this method and you want to get the data so you have to create a interface so that it doesn't give warning so you can just get back to the student service and move on top export interface my student edit response okay response open and close so first will be what it was like okay so here you see that is status and the student so there are two response one is status colon it's going to be a number either you make it small or Capital no worries add comma and then student colon and what data you are getting so in that we are getting all these details so already so we have already added this list here so I have already created that in the first video of insert data if you don't want also you can just add a like object I am getting okay object that's it so you can mention in this format also but I just want to get this here and paste it that's it save it and please don't add array here because we are getting only single data okay so now you can copy this and get below and inside this get student before this get function open and close angle and paste that that's it guys so here we call this interface and now you will be able to fetch the details of student okay without any changes here awesome so let's save and now guys you can just get back refresh all works fine okay so now guys just let us just add the loading part also so when the page is loaded I just want to this dot is loading equal to true so here is the is loading variable true once the data is loaded make it to false false nav save it get back refresh so here you see how it loads awesome guys so now guys let us begin with updating the data as simple let's move on the HTML so here you see on the form submit and the button type should be submit so when you update this it goes on this NG submit and gets to the update function so let's move to the coding and here is your update function so when we click on update function we need to get all the input Fields so for that let's create one input data variable equal to open and close curly brace where we mention all the requests what should be sent on the API request okay so that is name and this Dot student dot name okay so I'm getting from the student variable this dot student dot namestudent.course whatever you've sent let me explain you more here this is the variable so I'm going to copy that and paste here okay so no confusion and then guys you're going to for the course and my request in that course email this is the input and finally phone and this is my phone okay and now guys let's type the HTTP request for updating the data this dot I am going to use student service where is my student service let me copy this test dot student service Dot update student then use subscribe function then you'll be getting the response so before that I just send this all the requests use comma and the student ID also we need to send so for that where is the student ID here it is we have stored it let's copy that and send the student ID also awesome so now guys let us first create this function in the student service let's copy this get back to the student service so here we move below paste the student function name open and close first we get the input data getting that as an object comma and I am getting an ID also that is student ID which is in the form of number number all set and now guys write the HTTP client request that is I am going to use a put method because I have created API using put method let me show you that so in my level application I am using put to update the record okay so let's copy this API get back and paste here inside the build symbol let me paste the complete URL okay paste here and now guys here we need to send the ID so this is my student ID let me copy it and send the ID and after this add a comma and send the input request as simple guys it is very clear okay let me Zoom it more so you can see clearly okay let's get back save it and now guys you can use this update function move back to your edit component.ts file so now Guys open and close curly brace in the Subscribe function and then use the next colon open and close bracket of Arrow function so this is for the success response so here you get response of any response you might get and you pass that let me console.log first so we log that so once updated I just want to alert the message response Dot message okay so on the API I have given the message let me confirm it let me go to this update function so once the data is updated so we get a variable message awesome so let's paste here okay so message is like updated and this Dot is loading equal to false so when it's successfully done we need to make it to false okay loading part we have not set to active let me make it to true so once we click on update the loader starts and then once the updated loading Falls and then guys add a error colon Open Bracket arrow and function so here you get the error and this error only you are going to this dot errors equal to error Dot error dot errors okay and you can mix this to loading false on the error also and coming in any format okay so it will not give any warnings so now guys let me console log and show you this errors and you move back refresh let's remove this one email click on update you will get that 422 which is input error okay this email field is required you see here and you have got the response in the array format so here you see guys error is the main key main key inside that you find that errors so I'm taking this error and errors and pasting it error and errors okay we are storing this errors variable and here is the error variable and this error variable I am using in the edit form at this place to show the error whatever we get for that input field so now guys done and now let's try to update the record so let's refresh and instead of with prakash let's make it to with only and yep let me make it to Capital let's click on update so let's see student updated successfully okay and done Let me refresh you get that with only and here Capital awesome guys so we have successfully learned how to update the data in our angularjs grad application using larval API so now guys in this video we are going to learn how to delete the data from the database using a laravel API in angular so now guys let's get started so first let's move to this table view add this delete button let's move here so guys this is my student page component of HTML where I am or the student table where this is my delete button done so now guys at this button I going to add a click event so open and close function and just add a click and then you create a function like delete student function with this student I just want to pass the event and the ID dollar event comma and the student ID let me bring down so it will be clear so here is my click function okay and now guys copy this and go to the component TS file and you can create a simple function there use that same student function I mean delete student function you get the event first and then the student ID in this event we don't know what we are getting so just add any and here it's a number so I will add a number okay student ID obviously we are getting the ID integer data and now guys let us use the if condition for the confirm and delete the data so just use confirm function and add a message are you sure you want to delete this data so I just wanted one feature here like if I click on this delete button it's to tell that it's deleting and once deleted it should disappear so for that I just use this event dot Target Dot inner text equal to I'll tell delete thing okay done let's see the output of this refresh click on delete are you sure okay here you see it's deleting okay now you can get back again now guys let us write the code for delete the student so first I am going to my service there we will create a function like destroy student destroy student function where I get the ID student ID and I get in a number format now return this dot HTTP client dot I am using delete method to delete the record okay so I'll just confirm that in my laravel API application so here is my API for deleting the record okay let me copy this use TLD symbol and paste it and now let's copy the complete URL here you paste API forward slash student and then inside this curly brace before that add a dollar symbol so it will be editable format and now you copy the student ID and pass Here and Now let us copy this function and get back to the student page component add delete student function so now this don't this is my student service so I have already imported the student service let me just show you that so here in the Constructor I have imported that that student service okay so we'll copy this student dot service dot destroy student function what I have created so in that only we are passing the ID let's copy this ID and send in this function so it will tell yes I am sending the ID and what response you get you can get in the Subscribe function um response colon any is the arrow function we are going to refresh it okay so how are you refreshing the page we are using this function to refresh that data I mean call the data on the page load so use the same function here to reload the data so this function is nothing but the above function only it is calling okay so not to worry and now guys once data is refreshed you can alert the response message so here you get this response Dot message so what is that message and let me confirm here let's go to the destroy code once deleted here you see that message is there so you take this message response and paste here now guys let us try to delete the record yeah so let me add one dummy record so dummy dummy codes dummy at gmail.com some random digit phone number let's click on Save student created successfully okay let's go back and here is my dummy record let's click on delete guys are you sure let me cancel first okay let's click again and let's tell okay so you are deleting student deleted successfully okay and your data is refreshed perfect guys so as we have successfully completed how to delete the record using API in angular so guys thank you for watching this video please subscribe like and share

Channel: Funda Coder

Views: 14,344

Keywords: fundaofwebit, funda coder, angular crud with web api laravel, crud operation in angular with laravel api, crud operation in angular with api, angular tutorial with api, angular crud appliation from scratch, angular crud 2023, angular tutorial 2023, latest angular crud, laravel angular api tutorial, angular complete crud uusing laravel api

Id: oLGNK0wEZeU

Length: 87min 49sec (5269 seconds)

Published: Sun Jun 18 2023