ASP.NET CORE WEB API CRUD With Angular 13 - .NET 6 WEB API With Angular 13 CRUD Website

hello everyone and welcome to this video in this video we will learn how we can create angular and asp.net core full stack websites and in in this one we will use angular version 13 which is the latest as per this video and we will use asp.net core version 6.net 6 or sometimes called net core version 6 and we will create an asp.net core web api and later on we will link our angular project to our asp.net core project and inside that we will implement cred operations so for example i have filled this form and i'll save it and you can see the real time changes to the list which is bringing all the list of cards that we have in our database and along with that you'll be able to delete a card so i'll select this john and delete it so you you'll be able to delete the card real time and you will also be able to update the card for example if i select any of the cards i will be able to change it and update it so if i refresh the list it gets updated so we will do crud operations with angular and asp.net core so stay tuned till the end i hope you like the video if you do please hit like button and subscribe to my channel please hit that like button if you liked the video and make sure you subscribe to the channel so that you don't miss out on my next upload i have created my folder asp.net crud with angular and inside that i have created two folders api and ui so first of all let's start with the api and br and create ourselves a brand new asp.net core api using dot net six so inside the api folder i will come over here and i will open visual studio 2022 this is the one i've installed on my machine at the moment at the time of recording i will click on create a new project and using this uh this list of over here i will select asp.net core web api and click next after that i will copy this path because i want to create uh an api inside this folder the project name would be cards dot api and the solution name would be just cards and you can name your solution and project accordingly click on next and i'll use these options by default uh and i'm running it six which is uh the latest framework or dotnet at the time of recording so click on create visual studio has created me a brand new web api project using.net core uh sixth and then now it's time to install the new get packages for entity framework we will use entity framework core to talk to our sql server database which we will create uh after installing entity framework this will be used by our angular application uh to access the database via the cards api that we are creating just now so to to install the new kit packages we will come over here to dependencies right click here and click on manage new get packages in the browse section we'll search for three packages the first one would be microsoft dot entity framework core and we will click over here and click on install the second package is microsoft.entityframeworkcore.gov core dot this is needed to run migrations so i'll select this one click on install and the third package is microsoft dot entity framework core dot sql server this is used to connect to a sql server database which we are doing in our case click on install [Music] so now we have installed all the packages that we need for entity framework to talk to a sql server database we can close that and it's now time to create the models for our project we will right click on the solution on the project click on a new folder and let's say name this models and then the first model we will add is the card model so add a new class and inside here i'll have a few properties the first property would be an id field and i will create a grid for that and name it id and i will also annotate this with a key suggesting that this is the primary key of this table and after that i will have a few more properties let's say a string which will be card holder name a string with the name of card number and then integer of expiry month and this is an integer and then integer of expiry year and then an integer of cvc or the cvv code sometimes so all these properties now i have created that as part of our model uh it's now time to create a db context uh which is used by entity framework core to talk to our sql server and it's also used by entity framework core to run migrations to basically create our database inside our sql server so i will right click over here add a new folder called data and inside the data folder i will create a new class called db context and i'll name it cards db context this will basically inherit from db context class i will click control dot to import the uh using statements which is coming from microsoft dot entity framework core and i will come back here i'll i've clicked on this class and if using control dot i will generate a constructor which will pass the options uh the db context options which we are inheriting from the dbcontext class back to the base class after that we want to create our db set so a dbset is a property and is used by entity framework core and it acts as a table in sql server so let me explain if i create a property of a db set with the type of card which we are importing from the models folder which just created that and the property is cards this cards folder is basically a replica of the sql server card table that we will just create so now we have the db context let's create a connection to our sql server uh to create a connection i have installed the sql server instance on my machine so you need to go ahead and install sql server onto your machine and also install microsoft sql server management studio sometimes called ssms and then using this you can basically browse through databases and tables so at the moment we don't have any cards db but we will create that in just a moment i will come to the app settings.json and create a connection string so i will create a connection string property over here the name of the connection string would be let's say cards db connection string and the value of this would be it takes a server name it takes the database name and other stuff so the server in our case if i go back to ssms the server that i installed during the installation of the sql server was a dot in your case it could be a dot or it could be totally something else it could be your computer name or local db so use that but i'm in my case i'm using a dot and then after that the database name that we want to create in we want to create the cards db so i'll say cards db and then we want to mention the trusted connection equal to true so trusted underscore connection equal to true and with that we have the connection string ready it's now time to inject the db context that we created inside our application so for that we will use dependency injection and go to the program.cs file after we have this swagger chain and just before we build it it's now time to inject db context so we will use these services that the builder provides builder dot services dot add db context and it takes a type and we will mention this type over here which is the cards db context control dot to import that folder and it takes some options so we will pass the options options dot we will use sql server so i will say use sql server control dot to use the uh use microsoft.ned framework core and basically now we have to provide the connection string if you uh look at the the method parameter that it takes it takes a string connection string which we just inserted inside our app settings so we will fetch it from there so the connection string would be taken from builder dot configuration dot get connection string and it takes a name so the name i will copy it from there it has to be exactly this name so i will come back and paste it and i'll move everything in the second line so it's more readable and after that let's see if i have closed all the brackets now i have so we have injected our db context using uh dependency injection uh so now it's time to run entity framework core migrations and create a database for our sales which is the cardsdb if i refresh it i don't see any cards db over here but when i run migrations entity framework core will create a new database for me so let's run that for that i have to go to tools uh nuget package manager and click on package manager console in here i will write two commands first is add hyphen migration and click enter it asks you for a name that you want to give to this migration i will say initial you can say initial or initial migration or whatever you are because this is the first migration i have said initial so this is creating me a script of um so it has created me a script that dot net and entity framework core recognizes and it's basically if you look at it it's creating a new table and it's mentioning these are the columns i want to give and the types of all of them so basically it's an up and down script that entity framework core and dotnet recognizes so let's run the script now back to package manager console and i will say update hyphen database and click enter so this is running the command which is using the script file it's saying keyword not supported trusted connection i think i have made a mistake over there yeah it's a spelling mistake so trusted underscore connection if i save that and um let's run that again using the package manager console so let's see if if this time it runs fine yeah so it's done that it's completed it and it's run all that the migration file which is over here on this folder it's created a new folder and it's running this migration script that it created and now if we go back to the database if i refresh this we should see a new database which is the cardsdb and it only has one table the cards table which we provided as part of this db context db set over here so now we can use the context that we uh injected inside our solution and talk to that table so our entity framework setup is now complete it's now time that we talk to the database and create some api functions now we will create a new web api so i will create a new controller method i will right click on controllers add new controller and use the empty one click on add and i will name this uh the cards controller click on add on the on the topmost level on of the class i will annotate this with the api controller attribute and then i will remove this index method because we will create our own methods so let's start with the get all cards method and basically i will have a public a public eye action result uh and the name of the function would be get all cards and here i want to do something uh that i want to talk to the database and get all the cards from the that cards table we don't have anything but it should still return an empty list so i will use the construct constructor injection we injected the db context over here inside our server so we will use that inside the controller so that we can access the database so i will create a constructor ctor as a shortcut and i will use constructor injection and inject the db sorry the cards db context control dot to pull in dependencies uh i'll use this name control dot to create and assign this field so using this using this private read-only cards tb context i can use this private field over here and click period to access the cards table like this and because it's set up by entity framework it knows where to go to which database and which sql server to go to and which table because this is the table which table to go to and get the data form so i will create this as an asynchronous method so using the async keyword i will create this as a task of i action result and use the to list async to list async method which control dot using entity framework core and because it's an async method we we have to use the await keyword and now we can return this either you can save it as a variable let's say where cards is equal to this and then because it's an api we have to return a 200 success response uh so it's suggesting me already return okay cards that's good so now with that as the base we have to define more methods but before that let's define the route for our controller our api so i will define a route at the controller level first so the route would be let's say slash api slash controller this will automatically take the controller name in our case the cards controller and it will it will prefix the api keyword and we will run this in swagger to see you know if we are able to get or add cards so now that we have a base we can now define our first method which was get all cards as an http get method and the route for this one would be the base route so i won't add any other route so if you if the user types in the local host something something slash api slash cards they will come to this all cards method and it will return all the cards for that user so the next method would be get a single card and let's use this structure it will be an http get but in this case we will define the route because the route would be the same route slash the id of the card that we are trying to get the information for so inside here i will use the id property and i will make sure it's a good type so i will say colon good uh it forces the route to only accept good types and in here i will use the from route attribute and say you know the parameter of this function is i need a grid which is uh i need an id which is of type code so i can use this id and search the database if we find anything let's return that so we will use the same cards db context dot cards and we can use the first or default async where x is such that x dot id is equal to the id that we passed and let's say if uh the card was found we can say it was found uh otherwise it's uh it's a not found result so if and i have to change it to card not cards so if card is not equal to null that means it was found in the database then i will return an ok response and i will return the card information otherwise i will return a not found uh response back and you can say card not found any message that you want to send it back to the to the user or the client and this completes our single http get method the next action that users often do is to add the card and we will make sure you know we are adding cards from our angular application so the add method is the post method so http post and the add method doesn't take an id it just takes the whole card thing so i'll say add card i will change the name of the method and this will be from body because in the post method we have to take data from the body uh or we will take our data from the body and after that the the parameter it will accept is the card parameter which if we have to import it from the models and the the name of that parameter is the case card so because we are adding stuff now i can completely remove all of this let's do a fresh uh implementation of the ad card method so first of all i am not accepting the ids from what our client is sending because i want to make sure we create the ids the api uh the backend solution creates the ids so i am creating a new id so a good dot no new quit and after that because the rest of the stuff is already populated by the client uh they might have populated this as well but you know it doesn't matter we are you know overriding this with the new grid after that we will use the cards db context and we will add sorry we will access the cards table and add this new entity so add card over here and let's see if add also provides an ad async yeah add async and because we are using the async method we have to await on it and once you have done that it won't automatically save it to the database it had has just added it to the reference to save it we will have to call the cards db context again and tell it to save changes async so with that it will save the new card that we want to add to the table [Music] and once that has been added let's say we are returning uh that new card created or we already have that so now we can return that and a post method re you know an add method returns a 201 if you if you want to go you can search online as well it it creates uh it returns a 201 response which in dot net you can make it like that so a created at action it basically gives you the location of the newly created resource uh in the headers so by this way dot net already gives us a way so that you can return a 201 response and it will add the header for us as well so the first parameter it is taking is the action name the action name is the the get all sorry i have to rename that it is a get single card or get card so the action name is this get card over here because it's getting a single resource so i want to create a name for this one so action name is i'll use the same get card name so that i can use the type safe name of get card and then if you come down on the parameter on the variations of this method it takes these out values so the route value in our case would be the id so card dot id and next is the value so the complete value which is the card so using that it will create a 201 response http response and it will create the header for us and it will create the uh the proper header with the location uh that comes back to this get method so and we will see uh using swagger of how it shows so we have uh created the add single card or add card method as well next is uh let's say updating a card and let's create the function ourselves public async task of i action result and the name is update card so we are updating the card details and this will be in http put to http put to update details we use that method and uh this will basically have the same route as a single get card because we are updating a single card so we will use the same route and because we are using the same route we will have to pass we have to pass a parameter uh the id of the card that we want to change along with the the updates to the card that we want to change so we will also use the from body card so this is the updated details and this is the reference to which card we want to change so using that we will first see if we are able to get an id if you are able to get a card existing card from the database or not so let's say if i want to get a single card so i'll use this query again so i can copy the full line if there is a single card existing in the database so if card is not equal to null then or we can change because the card parameter already exists we can change it to existing card and if this exists already it that means it's not null we will update the details that is coming to us from this over here so card holder name is called holder name and then card number is card number then it could be a change in expiry month so expiry month is expiry month similarly expiry year and then cvc so we have updated the details for the card now it's time to save the changes so we will use the db context.save changes copy this line and paste it over here and this way it will update the changes because it already knows the the reference to the cards table and we can return the updated details return existing card because it's now updated um sorry return an okay response of existing card and when it's not found in the database or we don't need an s but it if it's not found we will return a not found response back to the client so card not found again so that's our update method now it's time to create delete method which is quite similar to the update so we will copy that and let's change stuff delete a card and this will be the http delete keyword we need a route because we need to delete a single card so let's say we pass the id we search the database if the card was found we will delete it the chain let's change the name of the method delete card and then in here we don't need the second parameter because we don't need in the full card details we just need the id if you have the id that for the card that you want to delete we will delete it so we will first fetch the card if it is found we will delete it so using the db context again dot delete or sorry remove and then pass this entity which is existing card and it will remove it for us and then don't forget to call the save changes because that's when save is actually happening uh and then you can return the deleted record for the client if they want to do anything otherwise if the card is not found again let's send the client a not found response so with all of these five methods we have implemented our web api uh it's now time to run this to see everything is working fine in swagger so i've run the solution it might take a few minutes a few seconds actually for the first time you're running it i am getting a fail to load api definition error because i uh i will stop the solution because i added the route id as uh just a text but it should be as this in this curly braces so that it can it can take the value and assign it to this parameter and similar to that i will make the change over here as well to here so now it's taking the variable from the route and assign it to our parameter so if i now run the solution again with that change i've run my solution again and i've refreshed swagger and let's try to add a new card using the post method i'll click on try it out i don't need the id field because that's uh the api is creating that so i'll add some values to the name let's i'll use my name and then a card number so one one one one two two two a six digit 16 digit card number uh and let's say 9 22 and the cvv can be one two three if i click on execute so it's come back with a 500 and it's telling me that no route values were found and i know the reason for that if i come back uh the way we are using the created at action and we are passing the route value instead of that we have to pass it as an object so a new object in which the id because that's what the parameter name is the id is equal to the card dot id and i can take that away so with that let's run the api again and even though it failed it still created the uh it ran all of these three commands and created the card holder and we can confirm that using get all cards so i'll click on that try it out execute and it has fetched that card that we just created so for example we'll create one more card using the ad and see uh and see that 201 created message so let's say i'll create it for john um something similar and then expiry month can be the same and one two three if i click on execute now it's come back with a 201 uh response which is the 200s are the success response so a 201 is a created response telling the client that we have created the resource and the reason i was telling 201 was if you look at the response headers there's a location header which points to this location so this is the location of the newly created resource even if i copy this and paste it somewhere else in the browser it will give me that actual resource so it's going to that it's that complete path to the newly created resource so that's why it's a convention of how we use 201 http response um and using that if i refresh the cards list we should have two cards now so our we have checked two methods both of them are working uh let's use the id of one of these cards and see if the single card fetch function is working or not i'll pass the id the good click on execute and it's giving me the details so it's coming back with the 200 response it's giving me the details successfully so that's confirmed as well and then the put is the update method so i will update this id and i will update it with some other data so i'll copy this just to make things faster um i don't need an id because it's not used by the update so instead of sami seni i'll say sachin and i will also i will not update the number i will update the expiry month uh to 8 and to 23 and 2 1 to 4. if i update these details click on execute it tells me it has done that because i can see the 200 response uh you can see the response body over here but if you really want to confirm you can go back to the get all cards execute the name my name has gone and instead it has been replaced to sachin the id is the same um and the update method works as well so now we will do the last method which is the delete one so we will delete both of these records or let's say just one so using the delete method click on try it out id and click on execute it gives us a 200 which means we are good and confirming it we only have one card left in that list of cards so our api is now working fine in the in the next section we will work on our angular application we will create an our angular application and cred operations from scratch and we will hook the angular application to our api it's now time to create our angular solution and we will do that inside the ui folder that we created uh initially and over here we will open command prompt so you can type cmd over here and this opens command prompt with this path but you have to make sure this path then changes so i can go back and come back again to you know stay on this path but now that we have our terminal or command prop window i am on windows so i have my command prompt open with that because i have npm and node installed and i also have the angular cli installed make sure you have these two uh in your computer if you don't uh search online and install node and then angular cli so i have both of these installed and now i will go ahead and create a new angular project by the command ng new and the name of the project let's say cards and then click enter so this will create the angular solution for us it's asking if i want to add routing i would say yes and i will use css as my style sheet the new project has been created from the angular cli and i will open this in visual studio code i will write code dot to open this project inside visual studio code otherwise you can just do it manually as well so i'll click on that and it will open visual studio code for me which is on my other screen so i'll bring that here and i will check this to trust it and i will say yes i trust the authors after that i will open this and i will also open a terminal and i will show you what angular cli gives us by default once you are in that ui path i will navigate one step down towards the card project or solution that we created so cd cards because that's the project that angular created once you are inside that project now you can run ng serve hyphen o to start the angular solution and also open it in the bro in your default browser so i'll wait for that this has now opened the angular solution and you can see all of this angular static web page which leads to some documentation etc all of this is being served from this index.html file over here so this is the starting point of the angular solution and if you are aware of angular components uh you can see that the body of this html only has this one component which is the app root component and if you look at the app root component inside the app folder over here we go to the app.component.ts and this is the selector which is the app root which is being used inside the html uh this is the selector and if we see the html all the things that we see on this web page is being served from this html page over here so this is the css and below if you scroll down uh there's that html you see over there so let's refresh or so let's select all of this and remove it and instead paste some sticks so this html was changed or anything else just to see uh if we are able to get rid of it and actually able to replace it with the our changes which we have successfully so anything that we change over here is being represented in this app component which is in the body over here so we will make sure we will change this app component and we will write our own html to show the to create a form over here which will take the card number card name and expiry month year and cvc and also on this side of the page we will show a list of cards that we have in the database so let's create some html so over here i will start with a container so div class of container and i will create the css for that in after i create the html uh inside the container i will have an h1 tag and i will call i will have text of angular plus asp core crud and then after the h1 tag i will have a cards container so div dot cards container inside the cards container i have have two boxes one on the left side one on the right side left one would be a card form so a div with a class of cards form which will we which we will use to submit card details and add a new card and on the right hand side i will have a cards grid which we will use to display uh the cards so inside the cards form we will have an actual html form we will we don't need the action and inside the form i'll create some form groups div dot form group that's a class which we will create later on label of card name so let's take the card name and have an input text box of with the name of card name and using that structure i will also create one more for card number and change the name to card number and along with that the third line will have three fields because there are small input input fields we'll have cvc expiry month and expiry uh year so cbc uh which is cbc and i'll change the format as well and this will be an inline group so i'll say form group inline and inside that i will have three divs and i'll paste this label and input text inside that div so i'll remove that and have two more divs format everything and then the next one after the cbc would be expiry month and then the next one would be expiry year and change the name accordingly and this is our html ready for the left hand side of the form and in the right hand side of the form we will have some static text at the moment and we will call the api to replace that and create a for loop and basically show cards that we have in the database so on the right hand side i will have a card row so div with the class of card row and this will have two things card row details and an action the details will have the name and the card number so div card row details and we'll also have card row action which will have the button in the details i'll have two spans one will hold the name so i'll put some static text and one will hold the number so let's say 9999 oops i have my numpad off so this is the card number and then this div will have an anchor element which will act as a button click and will hold a font awesome icon so let's uh add a font awesome icon to add a font awesome icon i will go to uh the font awesome i can i'll go to cdn.js and i will use this all.main.css file i will copy the link and i will come back to my index.html and in the head section i will paste this link and now you can basically use the icons in our html so i will search for this trash can icon and i will copy the the i element or for the trash can and if i go back now to the browser we can now see that we are able to use font awesome icons and the structure of this is you know looking very boring because we don't have any css at the moment but now we will work on our css and make it stylish if you are a backend developer this could be quite painful for you but being a full stack developer i find it quite interesting and you know because you're doing angular and asp.net core you should have good knowledge of html and css as well so i find this quite interesting so we'll come back to the css now in the css file i will give some global styles first in this style.css and i will start with the margin and padding so i will remove any margin and padding and then give the box sizing as well to borderbox and a font family of georgia you can have your own font family as per your likings and then i will start with uh the the container first which we are using inside the html over here uh so we will start with the container element and then give it a padding of 3em all around give it a max width of let's say 1000 pixels and then margin of zero comma auto so that it brings everything in the center after that we will work on our heading give it a text align of center and let's see how the changes are looking like as well while we are doing it the heading is in the center now now let's work on this form so the cards container which contains both the left hand side and the right hand side of that form and grid we will display this as a flex make use of css flexbox properties give it a width of 100 and a padding top of around 5 em so that to separate it out from the h1 tag then we will use the cards form which is the left hand side of the screen give it a width of 50 and a padding of 2 em all around and we will use something similar for the grid so the grid will also have the same thing um let's go back to see and now you can see they are separated out one is on the left inside one is on the right hand side but now it's time to act on the form itself so we will come back to this i can close the html i will come to the form group elements now so form dot form group have a margin bottom of 1 em the now it's time for the labels so form label uh display this as a block so that they occupy their own space and uh let's give it a margin bottom as well of around 0.5 em uh and see if we are able to visually see the changes as well yeah and coming back i will also have the font weight as bold for the labels and now it's time to work on the input elements so input of type is equal to text and also type is equal to password or type is equal to number so the ones that we are using are not really so for all of these uh yeah for all of these we will have a width of 100 a padding of 0.5 em 0.3 em from left and right margin bottom same as the label and a font size of 1.2 am if you come back to the application let's see this changing so now you can see it's looking much better and now we also want to work on this so that they all come in line so we will work on the form group inline i will display this as a flex display this as a flex and then the flex direction to be a row width of 100 and then for each of the form group inline children which is three divs i will have the width of 33 percent at 30 so that i can space them apart so i'll use the justify content space between property so that they have some uh width in between if i refresh this it's all coming in together we also need a save button over here so let's add a save button inside the html i will use another div with the form group class and add a button element with the text of save and now let's style that as well the form button will basically have a background color of black some padding as well padding off 0.5 em top and bottom one em left and right the color of the text would be white i'll remove any border and outline and then give it a border radius of 2 pixels cursor of pointer and a little bigger font size 1.2 em and that should make this ugly looking button to be a little better so our form is ready let's work on this part as well and then we will call our api to populate the actual cards and not a static card detail so on the right hand side we have the card row so let's work on the card row inside of css the card row would be uh basically a width of 100 a display of flex and a margin bottom of a very small point to em after that we will work on the details so the card row details will have a background color of a slightly whitish color flex grow of one so that it takes the maximum space uh leaving a part that the button the delete button that we will have otherwise this details will take the maximum place from that percent i will give some padding of 0.4 em uh top and bottom and one em left and right display this as a flex so that i can uh make the content uh go left and right so justify contains space between so this will basically make sure that uh my name is coming on the left hand side and the number is coming over here on the right hand side like that and i will also have a margin i will have a line items as center as well vertically center and a margin right of 0.2 em so that i create some space between the delete button and these details and a cursor of pointer so that we are able to click it afterwards or at least give it a visual uh detail the next one is the delete button which is the card row action display this as a flex and justify content center and align items center and then the action button the card row action anchor element we will give this a color of some red display this as a block first cursor of pointer padding of one em and then the background color of this one would be a slightly red color so ef 53 50. i take my colors from html color codes.com you can go ahead and check them out the color the text color for this one would be white and uh i think that should be all and if i refresh it it now comes like this so our css in html is almost ready it's now time to hook our angular application to the api so let's do that to work on the api we will first bring some uh bring the list of cards from the api and let's see how so i will create a service inside the angular application the service is basically a way to talk to apis and we can inject these services inside components so that we can talk to an api via the service so we will create our first angular service inside the app folder i will create a folder called service and i will create another terminal and browse to that service folder so see the cards and then source and then app and then service so inside the service folder i will write this command ng g for generate s for service and then the name of the service would be cards and click enter so that angular cli can create the cards service for you it's been done and if i open it i can delete the spec file and then if i open this it's injectable in the root and now we can use this service to call the http any api basically so now we will create a first method to get all cards let's say the method name is get all cards and we will call the api over here we will call the api using the http utility that angular provides and uh we will make sure we we use the http module uh to call this so inside the app.module.ts we have to import another module we will use the http client module control dot sometimes it doesn't bring the path so i'll directly import it over here so import the the http client module from angular so from angular http sorry it's in the common folder as slash http so when we use that we are now importing the http client module and we can inject the http client inside the constructor so we'll create a private uh field and call it http and this will be of type http client and enter to that and this is basically coming from the common http path now we can use this http like this dot http dot get method that this module provides us and it used it needs a url string for this get method so we will create a a path for our api and i'll create a base url for the cards api it will be and i have to go back to swagger to get this so i'll copy the swagger path and remove the swagger details from it and i want to add the controller because the cards api path is this if you have named it something else it should be your url and then api if you have added it slash controller name which is the cards controller in our case so this is my base path yours could be slightly different or the same and i will use this base url because the get all cards which is this method just uses this root api route api so i will use this base url i have to add this keyword so this dot base url and this is an observable so you use the observable by subscribing to it uh if you just use it like that this won't do anything and the result of this would be a cards array a list of cards but we don't have anything so we have to map this to something so let's create a model a ui model inside our angular solution so i in the app folder or in the source folder i will create a model models folder and you can move this inside the app folder if you want to i'll move this inside and create a card dot model.ts file and i will create an interface export interface which will be card and here i want to create those five properties that i have uh in the api so if i go back um i have these five properties the id card holder name etc so i will create those five properties inside my ui folder as well so i'll create the id first which is of type string and then card holder name of type string then card number string and then cvc and then expiry month and last one would be expiry year so i have created these five properties it's now time to use them i will map this result the response of this api which is we know the card use that model that we just created which is a cards array it could be one or many and return this from this service method so this return would be of type observable slash sorry type of card array so this will be our return so now this function that in the service is usable inside our component so now we will inject the service inside our component so i will create a constructor and inject the card service so private card card service is of type card service and now use this card service when the page first time loads so i don't have ng on in it at the moment because ngon in it is responsible when the page loads for the first time and we want to load some default data we want to implement ng on init so implements on init and if i control dot and implement this interface i have the ng on init method so we will now come in here and call uh a method which we'll call the get all cards method so i'll create a function um let's say get all cards and this get all cards with use this card service so this dot card service dot get all cards so i will use the service to fetch all the cards from the api and i will call this function when the page loads so it's looking all good but there's something wrong because we know that inside the card service we are using an observable but as we just discussed we by by using an observable uh it won't really do anything it won't even call the api unless you subscribe to the observable so subscribe make sure that it actually calls the uh observable so when you subscribe on it you get a response back and then you can response you can basically use anything and do anything with the response so i'll console.log first to show you what we are getting from the api so console.log the response and let's see now if everything is working fine or not so i'll go back to my to my ui and i will open developer tools as well and if i refresh the page see what happens we get an error it's trying to talk you know when the page loads it tries to talk to the api which is on this location you can see that clearly it says that access to this url from our origin which is 4200 the angular application has been blocked by course policy course is basically when you have a url talking to a different url which is our api the browsers basically block those requests for security purposes and unless the api or our backend service allows it allows any application or specific urls to go through uh the browser will keep on blocking it so we have to make some change to the api to make sure we are not blocking anything and we have to enable course so let's go back to our api application stop this and come inside the program.cs here we have to add course to our services so we will come over here and add a service so builder dot services dot add course [Music] and then the add course method takes in the second option takes an action or setup action so let's say it takes the setup action and will pass that setup so in the setup we'll say setup.add policy and the ad policy takes a name and then an action so the name would be let's say default the default course policy and then it takes an action let's say options is and we will now tell what we want to add to this default policy so we want to uh allow any method allow any header and allow any origin so this way we are not blocking any ui to be able to talk to our api so this is just an example but if you want some specific urls or specific methods to be accessed you have to change this to you know something else but at the moment i'm changing it and allowing any client to talk to our api so with that we have defined our services but it's time to use it so we will come down and using the app we have to use course and give it the name of the policy we want to use which is this one so i'll copy that paste it here and then close it and i will start the api again so we have enabled calls inside our api let's see if we come back to our angular application after this has started running let's come back to our angular application and see if we are able to fetch the results or not so i'll wait for swagger to run and minimize it then swagger is running as usual i will come back to the browser and inside the angular application where previously it was showing the error i'll clear it and refresh it again this time it comes with four arrays back so an array of four cards back so if you if i expand on it you can see that these details are now coming back from the api i had four cards uh in my database and if i show you i open the swagger execute it i get four details back so the details coming over here are coming from the database now it's time to populate this grid over here and show it so i'll come back to my angular application and we will basically now instead of logging it we will assign it to a variable so i will create a cards variable which is an array of type card and i will initiate it with an empty array and instead of logging the response i will say this dot cards is equal to response and i can remove this console line so i have the details of the cards inside this variable and using a for loop i can now make sure you know i have i am looping it on the cards so i'll copy this and paste it over here and i will use an ng for loop over here so ng for this is what we use to loop on a list i will say let card of cards and then using the card variable i will say card dot or this has to be inside the variable this brackets like this so card dot card holder name and then in the number i can say card dot card number uh save that and if i come back to the application this is refreshing now we can see the details coming back from the api and this is just a static data which we can now remove so i can now remove this extra block that i had so i'm removing that and now we just have one block which is getting iterated on the list of cards uh save that we should have four results over here now that is working fine that's good uh we also need to make sure okay we will come back to the delete later on but let's add another card from here so let's use this form to access the post method so i will first make some changes to the form to use angular forms we have to first go to the app.module.ts file and import the forms module so forms module enter on that if you're not able to find the path uh we can find the forms module from angular forms and once you have done that we come back to the form define a variable and then assign it value to ng form and this is how we use forms and we can now use the ng submit method to call some function that will get hit when we submit this form so let's say on submit so the onsubmit method is getting called but we don't have the onsubmit method so i will create the onsubmit method and on the onsubmit method we will use a variable a card which is of type card is equal to and and we will initialize all of the members so id is empty and similarly card number card holder name expiry month and expiry year and last one cbc so we have done that we can now use this inside the inside the form so that we can enable data binding so we will use two-way data binding because we also want to update this form afterwards so we will use two-way data binding by using the ng model keyword and then ng model will be equal to a variable which is card dot and this is the card name so card holder name sorry this is this should be ng model and this is card holder name so this is how we do data binding instead inside angular template forms and on the same basis and and make sure when you're doing this don't forget to add a name otherwise angular doesn't like it so on similar basis we will add the ng model to the card number as well and then ng model to cvc ng model to expiry month and last one is the expiry year so we have defined all our uh input elements and we have defined how we are submitting and where we are submitting the form when we come back we can console on this so console.log this dot card and that's the variable we are using to initialize the form which is this one so let's see if the values are coming back to this form or not i will clear this and i will start typing something so let's say um i'm typing some is anybody already exists but i'll change the number so let's say nine nine nine nine eight eight eight eight and it could be anything i'm not having any any validations at the moment but you know that's for later or you can work on the validations so once i've created the form and posted it you can see in the console all the details that are in the form are coming to our method so now we can use these details the one over here and actually talk to our api to pass the details to it so that you can store it so instead of consoling it i will call this service to post a new card so add card is another function which talks to the api so i can talk to an api using the http client [Music] dot post method because it's an ad card it's a post method you can go back to the api to check that it takes two things one is the url and second thing is the body so the url will be the same for our ad card again you can go back to the api to confirm and the second thing is the body so we will take the body as the parameter which is of type card and we can use the card like this but this will be uh this will result in an error and first of all we have to correct this using this dot base url this will result in an error because if we use card like that the id field inside the card which is a good won't be able to make a zero or an empty grid to a a good property so we will have to initialize the card dot id over here even though we are not using it we will have to initialize it so uh this is the empty good or a default good in asp.net core so it's all zeros uh i will use it like that and this returns a card as well a single card so the return type for this method would be an observable of type card and because it's an observable we'll have to subscribe to it but we'll have to use it first inside here so this dot service card service dot add method and we will subscribe to this method to call it the add method uses that parameter this dot card which has all the details so we will pass it to the service and we will invoke this method using the subscribe and the response we will log the response we will log the response first and see if everything is happy response and if everything is happy uh let's go from there what to do so i will come back to my api it's getting refreshed so i will call this again and cbc could be 777 expiry month can be 8 and 22 and when i save it we come back with a response from the api but this hasn't changed because we haven't put any logic to refresh this after the summit so if i refresh this from here you should see another card which was this one because i added it from the nines so uh this is all working fine but let's add one more thing to add the details over here or make sure when we submit it this gets refreshed so what we can do is we can call this get all cards method again after um get all cards after our successful response so this will make sure um the form is getting so the the grid is getting updated and we can also clear out the form by just using this or we can just copy the same thing cards is equal to so this dot card and this should be inside the post method not here so this will clear out our form as well and you can use this using the ng form and using the form filter as well i know that but we are using this variable method uh variable way so uh we will clear the form like this and now if we let's try to do another one of let's say jason and have the card number as [Music] and some cbb some expiry and save it and you can see how it updates on this list over here uh and so it's all working fine now so now we have two functionalities left we have to delete a card uh which should be a simple one it's just calling the api and getting the list to refresh and the other one would be update which will which i click over here it will update the form and then we can save it again so let's do that let's do the delete first um so we will come back to the html and on the delete icon over here anchor element i will say the on click the on click method uh would sorry the click method of angular the click method should delete the card should basically invoke this method delete card and i will pass the id of the card so card dot id like that and now we have to create this method uh in the component i will say i can minimize that i can say on delete or sorry i have to use the same name so delete card delete card you can call it on delete but make sure your name matches in both places and we are getting the id which is of type string so i will use that id i will use the http sorry the cards service because we use the service dot we have to create a new method now we will create delete card method which takes an id of type string and then calls the http api uh delete method and then the delete method takes a url so the url is the base url and if we come back to our api the delete method which is this one takes the base url plus the id so along with this i will concatenate this with slash id [Music] like that so this dot base url is this so this will also return a card element when successful and we will now return this observable type card and come back to the api component app component to connect it all so delete card pass the id and then invoke this using the subscribe method and console the response or i know it will work so uh i'm confident enough that it'll work so i'll not console it but instead once it is deleted i'll refresh the list again so i will say this dot get all cards so it refreshes the list again and if i save this let's see that in action i will come back to my list and let's delete uh the let's delete json so i'll click on this delete button and json is gone even if i refresh the list jason doesn't come back because jason has been deleted if i click on swagger jason should no longer be there i can't find jason yeah that's correct so now we have implemented the delete functionality so once your you have set up your project you can see how easy it is to implement functions and methods after that so now let's work on the update functionality uh i'll come back to my code and in the html on this row of this card we will attach a click handler so click we will execute this function let's call it populate populate form and pass the card details that we have in this variable while iterating and now we have to create this method so i'll save this and copy this method uh and create this method now which takes the card details it's of type card and and let's assign this to uh the card we have over here um so i will say this dot card dot id or we can just directly assign it card and then save this so when we refresh now if we click on this or any employee let's say samir x it actually comes up with details over here and if we want to select any other one you can see the the form is being populated with the details and we will now basically work on the save button that we already have and we will change our method so that you know the save works as a save and update so let's do a simple trick we will come back on the on submit method and we will here check that if the this dot card dot id is empty then use this as a way to insert a new card so i will copy this over here i'll copy this here and close it and otherwise so use the else statement otherwise if the id exists uh we will create we will use the save button as a way to update so update uh card and pass the card details so let's create this method now this dot card um let's create a new method called update card in here update card will basically take a card and we'll have to talk to the api so in the card service let's create a an update card function which takes the card details and and return the the response coming from the api but use the http client to put the request because that's a put http put method um and it uses the url which is same as the url in the delete method so we will use that and then also takes the body which is the card details with the updated details and we don't have the id but we have the id in the card so we will use that id so with that this also gets a response of type card and this becomes an observable of type card so let's use this method inside the component it will use this dot card service dot update card and then pass the card variable that we have and then this won't be invoked until we call this subscribe method and then let's use the response and using the response we will just refresh the list again so get all cards again and this will get the updated cards as well so let's just delete a few junk values from here um and and we have to make sure that when we click on this you know the delete button doesn't uh you know add details to the form or populate details to the form but that's a simple thing um so clicking on here let's let's re update this john doe the details come over here to jason doe and then update the card number from 666 to zero zero zero zero so it's updating real time as well because you know we're using the same variable but if we save it it refreshes this list and if we refresh this again all these values are coming from the api now so it's real time and to correct this so that it doesn't populate it over here we can use this on click method on the details and not on the main uh container so now if i refresh this delete won't populate the details over here only this click will so now it's looking all good we have implemented all the functionality of adding a new card or deleting a card and updating a card and also to get all the cards and single card as well so this is all working fine now and we have successfully uh linked our angular solution to the api solution i haven't um i haven't gone through and you know added validations to the ui or to the api because i think that's a separate topic and it can be quite extensive as well but i'll leave that to you from here all i'll uh let me know if they link in the link down below if you want to see a validation video as well and and if i have time i'll just work on it as well so i hope you like this video it was a quite detailed video but as a full stack developer i think it gives you quite a good knowledge about angular and asp.net core web api all in the latest versions uh as per this video and i hope you guys really enjoyed this if you did please hit the like button and also comment on this video to make sure which part was your best and which part needs you know more uh information and i'll happy i'm happy to help you over there so yeah until next time thanks for watching and see you in the next video

Channel: Sameer Saini

Views: 100,095

Keywords: asp.net core web api, asp.net core api, asp.net core crud, asp.net core crud operation using entity framework, asp.net core crud with entity framework, asp.net core crud with angular, asp.net core crud code first, angular crud with web api, angular crud with asp.net core web api, angular crud, angular crud tutorial, angular crud with web api in hindi, angular 13 crud, angular with asp.net core, angular with web api, asp.net core with angular, asp.net core with angular tutorial

Id: eCbaZixsP-s

Length: 87min 10sec (5230 seconds)

Published: Sun Mar 13 2022