Full Stack Angular & Laravel CRUD | Part 2

hey what's going on guys so welcome back for this part number two in this video i'm gonna explain you how we can add the data and display on the table right so we can learn two different things in on on this uh on this part right so before i should go directly into it however i have a video for the api where i have build api card using laravel but just want to go through with you guys those are very new with that and want to follow along with me so i i want to show you that if i go to my employee controller where i have created all the apis we have a function with the name of add employee so what i did here we created a model with with the fields we get all the requests and as a response we give it a response of 201 which means everything added successfully right so that's the that's how we can get from the service and from the service we can uh share the functionality to the component and we can pass the data right so we can do all the things so let's jump in and get start here right so inside my source app and inside the component we have the employees folder and inside employees.component.html that's where we can uh create our very first form right all right so how we can create a very basic form so all i need to do is to define my basic html here right so let's create here a form so i created here a form inside the form i have a form desktop which is a bootstrap class so form dash group all right so inside form desk group let's create a label here and set that to be name and let's give it the name and now after that let's create here a input field so input type of tags and i'm using here bootstrap class which is form dash control so let's create that and bring here name and i don't need any id so just remove that all from here right so that's good so let's copy that and paste it two more times and now i need to also create a button so i just simply grab from my code and paste it right over here so i don't need it primary i just need to give it a dark color and set that to be submit all right so just change the label to email and set that to be email and give it the and give it the name of email and let's paste up here and just give it the name as a salary and give it salary all right so we are good to go right now we don't need to here at any form action all we need to do is to pass an even right so let's give it here the even which we are going to use here which is the ng submit directive so and the name of the function which is which should be let's give it the insert data right so we create a function on on this submit even this function will be called from the typescript file that's what i'm going to do after that but the very important thing you need to do is to go to your app.module.ts file right so this file with actually why we need that here we need to submit the form so we need here a form module which is very important because if we don't add up here the page keep refreshing and it has no any uh it doesn't know that what we are trying to achieve once we submit the form right so all you need to do is to define here form module so let's go get and define here but i don't need to define import it first but the good thing is that which can really saves a lot much time is to define form video directly inside the imports because vs code provide you an option that can uh automatically import the modules right so i'm going to define the form module and press enter and you see now we have our module inside of our app.module right so that's going to be done now next thing i'm going to do here is to define inside my employee.component.ts file which is this and here i'm going to create a function so the function name that that was insert data so let's give here the insert data all right so we created a function and let's give here console the log in order to test this out right so console.log and set that to be hello for now and uh i believe let's have a test this out right so i go here and refresh this and let's give here john a b nation 2000 submits that and now you see we can it it's uh calling up by function on ng submits right so the first part is done now inside your employee.com.ts file another very important thing that you guys need to do here is to you need to create a model so in order to create a model i'm going to use here ng i already have created in my previous video so just want the confirmation i want to show you all you need to do is to type ngg and class for employee so that's going to create a model and that should be there employ.ts5 right so here i'm going to define here name email and the salary so let's give it a type any which means it can be of any data type email of any and the last thing which is salary so also give it of type any right okay so we have defined all the oh what actually is happening here right so we have defined all the types including the names of the fields that we have so now inside your employees.confident.html there is very important concept here which is the two-way data binding right so what actually we need to do here is to just simply define here this is the two-way data binding includes the object this employee is coming from here so we need to define that inside our component.ts file so let's define up here just after your employees any you need to define and include your employee now it's it's uh the problem that we're facing here is it doesn't know from where this employee is coming from so let's define here so import the employee from the uh that should be inside your source slash app slash and there we go so we have employ right so that's where we have defined this employee now we have included the employee object which can create a new model uh so employee equal to new employee right so now you need to do by the help of two-way data binding you can access the object and with the including fields so i'm going to replace that with the email and that should be with the salary right just bring up a space which might not uh put any effect in fact but still that's good way to do okay so we didn't with that and let's have a test this out right so i refresh which i don't need actually so let's do and click submit the function is running but now i need to access the object so before that i need to just simply define here this dot employer all right saves it and let's test this out now we need to access whatever we are adding on in our name email and salary submits that and now you could see that inside our employee we have our name email and the seller all right so that's fine right so we are done with the first step and now next we have to add the data using the service so i'm going to add here this dot data service dot and the name of the function so in my case which i haven't created here so let's go inside your service and let's create here the function the function name let's suppose insert data and this is going to be very much similar to that the only difference that we see here is that we need to we need to because we are adding the data so we need to pass here the data so how could we do that it's very simple um you need to go to the this dot and let's add the function inside here and let's access the object which is this dot employee which includes name email and the salary we need to subscribe that and let's check the response so i'm gonna define here console.log and let's give it air as a response and now this actually is coming from the service so what i'm gonna do here is go inside now we have expected zero argument but get zero because inside our service we haven't passed any data right so let's give here pass here the data and change the api which i believe is ad employee which i can show you these are my api which i've created uh let's go into the routes api.php get the name of the function which is the add employee so let's bring up here and including the data right saves it okay now let's test this out again and see so let's pass your name age salary submits it says that method not allowed all right so why method is not allowed yeah it should be post request right because we are submitting the data right that's what i can show you here using the api all you need to do is to just simply add the route go to your body and after click on the form data you can pass the keys value keys values and you can test this out so if i click send and it's going to again add the data with it with the including id 10 right okay so let's go and do hit that again so i click on the submit so this is going to work right so if i refresh this you could see now we have the data is added right all right so next thing i'm going to do here is i don't need to keep refreshing my page so for that i need to call my function right after that so just remove that and let's define the function which has get employees data so i i don't need to refresh my page to check the data all right so let's refresh this and add the data let's give it here new data new at the rate gmail.com and salary whatever it is so submit that and you see now our data displayed on the table right so this is a very good functionality that that angular provides you

Channel: AB Nation Programmers

Views: 5,203

Keywords: laravel, angular, laravel and angular crud, full stack, crud laravel, angular tutorial, api in laravel, How to create API for File upload In Laravel, Insert data from Angular to Database using Laravel, Delete data from Angular using Laravel Api, Update form data using Angular, angular laravel authentication, laravel and angular together, how to use angular with laravel, angular with laravel api

Id: FZe7uj9660c

Length: 11min 18sec (678 seconds)

Published: Thu Dec 10 2020