Create Modern Web Apps with Angular 16, ASP.NET Web API, EF Core, and Bootstrap 5!

hey guys what's up today I am going to show you how to create a sample application like product management system using asp.net web API angular 16 and Entity framework core okay first of all I want to check the prerequisites like what is the current.net version I have 7.0 but you can use 6.0 as well okay let's check the version of node currently I have 18.16 so 18.16 is the latest version and if you do not have the latest version you can download it from node.js.org similarly you can download your dotnet framework from.net.microsoft.com okay and what else I also need to check the angular version NGB currently I have angular CLI 16.0 which is the latest version if you do not have the latest version you can use this command npm install globally angular CLI add latest it may take a couple of minutes yep it's done now I would like to create the project um one is for UI project and other one is for API project let's first create the UI project NG new and let's give the project name as PMS product management system dot UI so it will create a new angular project for us yes I would like to add the angular routing and also I'd like to use CSS it may take um a couple of seconds to a couple of minutes all right now let's go inside the folder which is pms.ui and I would like to open the source code in the Visual Studio code this is our code and you see under the source we have the app folder it has app routing app module.ts and so on and this is our app component okay first of all I would like to build it let's open a terminal and run the command like NG build okay we'll succeeded let's run the Andy serve Dash open to open in the browser succeeded so this is our template currently we have okay and I would like to update this um home page so this is inside the app.component.html so I'd like to delete all the existing um code except the routing Outlet we need the router Outlet to render our routing and if we save it we can see it is empty okay so what we want to have here um I would like to add Napper here so let's go to the bootstrap and first of all I'd like to add CDN to include the CDN copy that CSS I mean bootstrap CSS and in the index under the link I would like to paste it here the link and then I'd like to copy the Buddha strip JS file which is I should include in the index.html file okay now let's go into the app.component.html I would like to add um put a strip Network which is under component I guess yeah under components and I would like to add never something similar to this one maybe yeah so let's take let's copy this source code and paste it here all right what it looks like so this is our Napper and I would like to use never um Maybe never dark okay and background also dark let's see how it looks like yeah looks great and I would like to use container not the container fluid okay looks great and then I would like to change the um number name here I would like to keep it like our project name which is PMS are product management system let's let's give it a name product management system hmm okay and what else [Music] um it has a home page here um what we can do maybe you can keep it like products and we need another one for add product right also and I do not need this to list here let's see okay looks great at this moment so first of all um we can add the link here for example currently it it has hdf which is hash and I would like to give it a like router link which is maybe products so it's gonna be um domain then products okay so let's give it a routing name uh routing link which is gonna be router render router link equal um products if you see at the bottom left corner we can see the localhost colon 4200 slash products so what we need to configure the router okay so to configure the router let's go to the app dot routing sorry app dash routing dot module okay we need to add the routes here so we need to add an object which has a path so this is our um default like um path so we need to add a component which is so we do not have the components yet right so we need to create their components so let's create the components first to create the component let's open another terminal like new terminal let's go inside the source maybe I have ordered then create a new folder called components we also need another one for models and one more for services okay so let's head over to the components then we need we can use angular CLI command to generate the component let's give it a component name products okay NG generate component and the component name is products so we have now our components which is products okay now let's go back to the routing module we need to add that components here which is products component so this is our product components and we imported that one from that source let's save it we also need another one um another route for these products URL right so what we can do we can create path for products okay and component is the same component this is products component okay if we save it now we can see you click the products we can go to the products and you can see the URL okay that works what else let's work on the products controller so in the products controller we want to see a table of the products okay so we're gonna take help from bootstrap tables okay and I wanna see table something playing like this one paste it here and let's see how it looks like okay we need to tweak little bit so we're gonna have a deep um container right and also we need a H1 Tech for products heading okay and we need this here now we can see it is aligned looks great Okay so we want to add like this is maybe ID like product ID this is a product name this might be product type and one more column for color maybe so we need another one for um price okay so and what else we need tea body which is here but we do not need all these rows so this is our rows okay now we need to create that um products list which is gonna be under product Dot component.ts okay so what we can have here is let's create a list of products products which is type of product so at this moment we do not have that type of product okay so we need to create that product so that is gonna be a model let's give the model name as a product dot model Dot yes okay in the product model would like to add an interface export interface name is product and we want to add an its ID as in a string name as in a string type and string color the string price which is a number okay so this is our um model now let's go back to component so I'd like to import that so if you click on this one and press Ctrl Dot you can get this quick fix so important product from the model at this moment we have empty products let's create some products here ID get some number whatever then name let's give it a name like t-shirt Maybe what is name type which is requirements product color the blue and price which is gonna be maybe 9.99 so we have one product let's create one more a different ID maybe this is iPhone 14 pro this is mobile and prices let's say yeah so we have two product now we would like to show in the products list so what we have to do is we have to um run like we have to Loop through the list okay so we have to look through the rows for that we need to use Ng 4 this is the for loop we're gonna use let product of products okay and we don't need this I want to show here product.id product dot name okay product DOT type product of color and one more product or price okay now let's see yeah we can see um the both the products are in the list okay looks looks good um what about if we do not have any product uh I mean let's say we do not have any products right it's empty then how it looks like it's empty so instead of that we can tweak little bit and we can show like if there is no product just display no products found right so for that we need to create another P tag here and all products found okay so we need to use NG if here and the if if there is no products um variable or products variable is there but length equally equal zero meaning there is no products right let's see yeah no products found is there but still we have this table we need to hide the table as well how can I hide the table come over here we have to use ngeef like if products is available I mean products variable is available and products Dot LAN is greater than zero so this is opposite of this condition okay now let's see yeah so there is no product and let's have some product we have now some product and we can see the text is gone and we can see the table so UI is good so far what else um at this moment we can create the API and hook up the API with the products component right so let's create the API project I am creating a new project I'm selecting asp.net core web API I am going to give the project name PMS dot API okay next so I have um.net6 here you can all see that in seven and hit create okay so this is a project um if we build this project and run it and I would say there is an existing API in the server which is weather forecast but we are not going to use that one right so what we can do first of all we can delete that controller also the model and also try to build it still it looks good succeeded first I would like to add the dependencies right click on the dependencies Menace nuget packages go to the browser and make sure package source is newgate.org and I would like to use um Entity framework code so we need Entity framework code for SQL Server because in the back end we're gonna use a skill server database except and also tooling for um executing like for migration database migration okay so let's try to build again looks good so far so good okay so what do we can add we can add a controller let's give it a name um maybe products controller okay so this is inherited from controller and we are going to use this controller as an API controller so that we need to annotate that FBI controller right and also we can annotate the routing here what is going to be routing route it's gonna be API and controller name okay so this is the API um we do not need to return any views here okay so we do not need that one and you want to return actually all the products right at this moment we do not have the product um model so we need to add a model let's create a folder give it a name models and then add a new class product okay so in the product we need to get the same properties so we need like wheat ID name then we need um type product type another string type for color and we need another one for price price is actually decimal so it's kind of a decimal right okay so product model is ready um we're gonna return the list of uh uh product from here okay so before that we need to create DB context so to create the DB context we can create a folder called data okay in the data we can create a class name it uh PMS maybe yeah PMS DB context and we should inherit it from DB context so we need to using we need to use the using context using name space here which is Microsoft dot Entity framework go okay now at first let's create the um Constructor which is PMS TV context and click on text options and pass it to the base and also we need another DB set uh products so we need to import the product in any space okay so far so good we need to fail because of this method when it returned something from here okay so we can create our Constructor here and we can pass PMS DB context and give it a name maybe PMS TV context okay and we also need um yeah private variable which is see private read only previous DB context and we can assign that we can also uh we can rename it a little bit underscore PMS okay so this is going to be underscore PMS equal and this is PMS DB context so it import the pmsdb context using this name space okay so now we have the pmsdb context oops it is actually DB okay so what I can do so this is actually get method so we need to annotate with the HTTP get then um and we are gonna use task I mean a sync with a task so what you can do you can get all the products msdbc contacts dot products dot to list then you can return all the products okay so what we have to do we have to use a weight since we used aware we need to use list async so to you use a linger sync we need to import this Entity framework core okay now let's build it will succeed it and let's execute it and we can see we have this get method which is API slash products and at this moment it returns 500 because there is no nothing empty so if we click over there and hit execute again oh because we need to resolve the service meaning we have to inject the dependency because this products controller has like pmsdb context dependency right we have to provide it so how can we use the um dependence injection to inject these um difficult text let's go into the program dot CS so to use the dependence injection we're going to build a DOT services at DB context okay and our DB context name is pmsdb context Ctrl Dot import the namespace and then options success uh we're gonna use options Dot um use oops use SQL server um control dot where to import this Microsoft dot Entity Framework then we have to pass the um connection string okay so to add the connection string we have to go to the app setting and in the app setting we have to create the connection string which is gonna be connection strings inside the connection string let's keep this um PMS DB connection history oops it's gonna be and the bill is gonna be server okay name we have to provide database which is gonna be let's say PMS um DB maybe okay and we have to provide trusted connection equal true Trust server certificate equal truth okay so first of all I would like to find out our server name so I am going to the SQL Server so in my machine I have SQL Server installed and the server name is localhost so you have to find out what is your server name okay you can easily find out the your server name if you click on connect and if you would like to find out the server name click on the browse for more click on the database engine and you can find all the list and connect this one this one but I'm gonna use localhost all right and these are the database list so I'm gonna give the server name as localhost okay now go back to the program.cs file and I would like to use the configuration which is Builder dot configuration and get connection string and get the connection stream name here which is this is our connection stream name it's giving me an error because of this okay okay so that's it so then so you're gonna use the SQL Server Connection stream perfect now let's create the database migration so from the tools nuget package manager go to the package manager console okay um first of all I would like to add Dash migration and give it a name Maybe initial aggression you can give whatever you want to do okay and you will see we have a folder name called migrations okay and so what you can do update database we execute this command it's gonna create the database and also table if we head over to database refresh the database and we can see pmsdb has been created also a table has been created which is products at this moment it is empty okay now let's run the APA game this time you will see it will return empty okay I had a breakpoint over here you see response is empty array also a status score is 200. okay because we do not have any data in our database okay now let's create another controller I mean another method which is the post method would like to add some products okay so which is going to be HTTP post and give the pop click a sink add product provide the product from from body and type is product we have to import the models and give it a name product okay and so but the product that ID would like to assign the product.id because we do not want to pass it from the UI so we can generate a new Grid in our backend API right and that's it so we assign the product ID and then what we can do we can use pmsdb context products oops add and product right then PMS give me contacts dot saved changes async we also need to use ao8 here since we are using asynchronous method then finally return um okay and also you can return the product the new product so what is the complaining here oh we have to use add a sync okay so if we build it and it will run the project would see we have now two AP endpoints one of the products otherwise the product at post method so let's try it out we don't want to provide any ID because we are going to create in the back end right um that's a t-shirt the product type is garments right and color is let's say red prices maybe 9.99 execute response code is 200 which is Success which means success and response body because we returned that product right so we got the product with the new product ID now let's run get all products method maybe you should disable that and we can see we got 200 response and also response the product since we have the only one product so it's only one product that means it is working as we expected right and we can also verify the database if we select the table we can see the record is there okay maybe at this moment we can hook up this um get method in our angular UI right so let's go back to our angular UI now we do not want to use this um hard-coded um products anymore you're gonna consume it from the APA so to consume the products from API we need to use router and also we need to create a service that service will invoke the API okay so first of all we can implements on init um so this is gonna be NG on init um what you can do also need a Constructor it will take private the service also we also need a router it is gonna be from router okay so when it import this router angular router now let's create the service to create a service let's go back to the other window Powershell right that's um head back to our services so we need to run a command which is like NG generate s for service let's give it a name products so it's going to create a product service okay you can see product service class has been created that's great um so what we need to do we want to create like um get all products method and this will return um the list of products which is gonna be product list right we need to import the product also you want to make this observable okay so we need another import which is rxjs okay so we need to have like um API base uh URL let's create That Base URL base API URL and what is our base URL let's check so this is our API base URL 7296 port number right so we can exclude the slash at the end okay for now we are I'm keeping a hard coded later I can move it to environment variable we also need to import HTTP client so we can use private HTTP which is from http client we have to import this so no code options is available how can we import the client okay to import the HTTP client um you have to go to app Dot module.ts so here we can import the HTTP client module here so what we have to do import http client module from um angular common slash sttp and then we can add in the Imports this GTP Cloud Model right once we have it here then we can go back to our um product services so that we can import it over here sdb client so that is result now now what we have to do we have to use that HTTP client this is the http dot get and I'm going to get it from where on the base URL Plus slash API slash products right so this is the base URL which is localhost colon the port number then what is going to be zpic slash API slash products okay and yeah we have to return this one also we would like to return a typed this is actually product array perfect so we'll get back so we'll get all the products from the service now we need to use the service in our um component so what we can do we can call the service like distort product service which is we do not have yet here let's say oops private uh products service type product service okay then this is the product service get all the products right so once you get all the products we have to subscribe that um the next if you get any response such as like products right so we have to use those products and if there is any error you can use that response however we would like to use so this is the format so what we're gonna do you can assign those products oops to our local variable which is the products right and if there is any error response for now we can use console a lot okay hmm so we can give it a try so far there is no products um why is that let's investigate a little bit more if we inspect the console and we see it we have like Access Control Allah origin so we need to set up course policy course policy okay so to set up a course policy we have to go to our project go to the program.cs file and before authorization um let's use course okay so in the course I would like to apply the policy success policy allow any header okay also allow any method allow any origin okay looks good let's build it and run the API okay now let's end this serve again okay we got the products um although I have only one product okay you see this is 9.99 maybe you can use um what is called pipeline currency right so you can see a dollar sign on the currency on the price there is a little tweak if you have a different currency name you can use different name um whatever like if it is like any name you want you would like to like 3D for example it's gonna show your beauty like ability or whatever currency you would like to add okay if you don't provide any It's Gonna Be by default dollar okay so that works good now we would like to yeah so Home Path and also the products part both are working fine now I would like to work on the add product first of all I need to add that route which is gonna be app dash routing dot module Okay so another object path it's gonna be let's say products slash tag and component please you do not have E8 right so we have to create that component so what we can do go back to our components folder then run Ng um G for General C for components and this time give the name add product okay hit enter it will add the product controller okay now we have the component which is gonna be add product component okay successfully and if we click on this one it's not gonna work um maybe we need to rebuild again or you can type NG serve it will build answer oh we do not have that um link here see it's a hash only right so what we have to do we have to add that router link which is gonna be write a link and that's gonna be um products then at okay now let's go back get something wrong let's check that what is the wrong here so that is the incorrect format okay you click you can see the products Dash add okay and this is the products controller now we need to work on the products controller add products controller which is under component add product so this is the UI so what we can do we can go back to our um bootstrap then let's find the form okay so we need um some sort of like form um where we have like text boxes right so this is kind of similar I guess we can use this one it's kind of similar let's copy that one and paste it over here okay at the um top we can have it deep class name container and that is gonna be whoops okay so if we come back here we can see on the add products we have this fields but we do not need this checkbox so you can delete this checkbox first of all then only the level for this is for um name right you can give it a name level is name type is like um text IDs for name and we can also use name or name right we don't need this guy anymore at this moment so we do not need this deep also um maybe we need yeah it is for this one we have to close that similarly we want to add this one for uh dies so this is gonna be type text field IDs tie a name is type so this is type similar you need more uh this is for color and we need one more for um price right and this is gonna be number type okay and we can have a save button here let's see how it looks like okay looks great um so you can have like Edge one tag at the beginning let's say H1 at Neo product great looks great now and also what I can do we can have a live um column here maybe I guess so the row and then D for call 6. so this is gonna be two times intent okay let's see okay we have now better text boxes what else okay so this is our and how can we bind the model so we can bind the model you can type like NG model is going to be model name right so what we have to do we have to create that model name first so let's give the product name um I mean model name is gonna be new product I guess you can leave it whatever you want it's gonna be product type and the object has like ID field name type color price so this is our model and we need to import the product name space okay now go back to our HTML now we can bind the product name um so our model name is new product dot name why is that complaining um NG model yeah that's great 6.6 so after adding model I see there is an error because we need to use form module in our app dot um module.ts file so let's import that forms module okay and then edit under Imports so that will resolve the issue okay so similarly we can add the model for other fields this is for price so what is the price is the color and is the type okay all right and if we see the UI this is still looks like this now we have to work on the same button so to work um on the save button we need to add in the form like we have to make it like NG form says NG form and we can give like submit button here and the submit and let's give a method name add product okay and we have to create this method in our component.ts file so what we can do we can come back here and add product so we need a service for that right so let's go back to our service which is our product service so what we have to do add product and we're gonna have a new product here as a product type right and then so we do not have any ID at this moment right near product so we can pass an empty um grid here right and then we can pass this new product to the http post method that is gonna be product and this dot base API and we're gonna have that method URL which is API slash products also you want to pass new product as inside the I mean as a form body okay so you can pass like empty grid here which is gonna be let's generate that empty quit let me empty grid value this is the empty Grid or yeah zero quit whatever um what is the error here component product okay we did not complete that at product yet so you can then use the service add product pass this new product right and once that is executed we can subscribe if that is like observable so we have to make that service return type as in observable product type okay so you can subscribe the Subscribe you can have two event one is like success other one is like um if there's an error so if there is a success what we like to do is like we want to navigate to our products list right oops I forgot to add we have to actually add our service so how can we get the service we need the Constructor this is product service from product service right we also need our router router that router so this is gonna be from product service so once this is Success what we would like to do would like to route to our product page right the products list so this is actually products URL if there's an error would like to see in the console log from now okay so we can give it a try maybe at let's say we have a product for t-shirt let's add in the product iPhone mobile type gold color except price is 14.99 yep it works so since it was a success and we navigated to the product space okay what else so we have that method ready now let's add like edit um option and delete option okay so to enable the interruption and induction we have to go to our products list HTML so we need another um column extra two columns um one column is for um edit right and other one is for delete so what we have to do in the edit we can see in the UI you have the edit we have to mark we have to provide the router link there so router link for edit it's gonna be let's say um class product right then we're gonna have edit then you're gonna have um product.id okay let's see how it looks like so if you have a robot if you see at the bottom of the screen the left corner you can see um domain name slash product slash edit and the product ID which is good okay it works great and we will work on the delete button later so as soon as we hit on the edit right now it doesn't do anything but we would like to create the route for the edit so we have to go to our app dash routing dot module so we need to create our path which is going to be products slash edit slash column ID this is gonna be the variable right and also we need to create the component so to create the component we need to use the command same command like NG G components let's say edit product right so you can see you have the edit product component so that we can assign it here component is gonna be edit product components perfect so if we click on this one we can see this is now in the edit product um controller or UI you know you can also see the URL got changed okay um no where's our edit product yeah so this is our UI so the UI what I would like to do is like we need to have the same uh UI we have in the add products right so let's copy this whole thing come back here and paste is here so this is not a new product it's gonna be like update product right and let's go inside let's create that um let's say update product which is gonna be a product and also the product type which is you can find it from here okay so this is gonna be update product I'd like to use it over here and this is gonna be update okay so it's complaining the issue we have to import the product model name space and we need to use um any product model is over there okay that's good so what is the error here oh we do not have the update product a method here that is the problem okay skip it oh um cannot have the same variable name and Method name so what we can do we can change the uh variable name maybe update product request right so press the UI UI is over here this is an update product request okay and the UI duplicate identifies what is the duplicating device um oh looks good okay so what I can do we can go to the products click on the edit so we need to populate these products here right so to populate that product we need to get the product from the UI from the API right so for that we need to use NG you need we need to implement and the only need actually on you need this is gonna be NG on init so we need the Constructor here because we need the router we need product service okay product service and I think for now let's sign up what else um okay we also need um active route here private uh route this is gonna be debated route because we need to get the ID from the route okay so how can you get the ID you can get like this route put on map and we can subscribe there right so in the Subscribe we have a next the next we have a list of params from the list of params we can have a look ID params.get ID okay so once the ID is available right then we can call the product service to get our uh product by ID so this is gonna be this product service dot get um product by ID so so we have to create that um method in our product service so in the product service we can have like ID as a string type right and it will return observable the product return is the http CAD product from this base URL slash um API slash products slash the ID they are providing right Okay so oh okay so at this moment we do not have this um method ready so we have to create that um API method let's go to the API project go to the controller and then um we can create a new HTTP get method and we have a route there which is gonna be um ID which is actually good so public sync task product or you can use action result okay get product and the parameter is gonna be with ID yeah so first of all I would like to see If the product is available right so I can use PMS TV contracts products first or default async where excess ID equal equal ID if product equal null we can return not found otherwise return okay with the product so this is the API you have let's give it a test let's first of all find out all the products we have available let's copy this copy this um product ID and come over to the get method of the product like provide the ID and execute and we got work we got back the response so and it's a 200 let's provide something which is not available maybe this one this is not available right so this is returned like 404 status not found and since and we can see also the 404 the status Response Code and if we provide a ID which is available we can get back the response with 200 status code and also the product so IPA looks good now let's Implement that we already have the implementation we simply need to okay if the product ID If the product is available from the service um what are you gonna do we're gonna subscribe this one since this is observable next is gonna be let's say response surface I'm gonna do this dot uh update product request equal this response okay looks good okay we lost it the browser we need to run again if you click on this one you can see it is pre-populated right and if you click on the mobile you can see this is pre-populated um we can also show the ID here right I guess you can show the ID which is non-editable let's do that so what we can do um you can have like ID field over here give it a Name ID and just make it read it only let's see yes straight down you cannot update you cannot edit anything here so these are looks similar maybe we can use a class background light yeah little difference so now we need to work on the update method as soon as we click on this one it's gonna update the product and it will redirect to the products list right okay so let's go to the edit product component and what we're gonna do we need to use again the product service so we have to clear that update product method so this is gonna be oops update product and it will pass ID as a string also update product request which is gonna be product type right and once the update is done it will return so return D dot http this is gonna be put method so this is the HTTP bar put you're gonna use to update our product base URL and that um API part is API products right plus ID and also updated product request as a body so we wouldn't want to create that method in the API side also so that is gonna be HTTP put method okay and we still need the route which is gonna be um ID okay and give it a name click a sync task action result give it a name update for that so from Rao yeah we're gonna take like um like grid ID and product typo is like uh update product request okay so first of all I would like to see if the product is available at pmsdb context products and find a sync we can provide the ID so it will give us that product if oops if product is not available [Music] right right couple of times name let's say type color price okay then what we can do we can update DB context and finally return okay with the product so that's it we can give it a try let's get all the products we have here so we have here let's say iPhone 13 Pro Max right I would like to update that product so this is the product ID and we don't need to pass we can pass the ID yeah we have to pass the ID I'm sorry yeah name it was iPhone 14 from X right 13 Pro Max I would like to update to iPhone 14 from Max type is mobile color it was um gold before I would like to update like 15.99 right there you go yeah let's execute you can see a status quo 200 that means it's got updated also got the response and if we execute again we can see now it is iPhone 14 pro Max that means it is updating database you can also check in the database I have important Pro Max okay now our API is ready now let's try to update from the UI okay somehow I lost the UI again okay what I can do let's update the price if you like I updated this price little bit more that's a 14.99 click update oops it did not redirect let's see there's some sort of error or something maybe I did not provide the update product is there oops it's empty and how can you expect to update that um product right so what we have to do we have to use the service product service then update product we're gonna pass this update product request dot ID and also the update product request itself right once that is executed we're going to subscribe next uh response so then we want a response like if it is Success that is the response right the router would like to route this to the product base so this is the router that navigate and it's actually some method so you have to use parentheses is there isn't any error we can console the log okay okay we missed resources now let's see so if we update to 14.99 did not update it looks like there is an error now let's investigate it um the update is not gonna update let's inspect the console and if we see there is an error it says 404 so what can be the issue here if you see the API it says API um products right so in open new tab you will see product we are expecting a slash here right which is missing so let's fix it if we come over here in the service we need to add a slash that was the issue now if we go back and edit the price 14.99 I can see it is now 14.99 updating it can be updated anything maybe iPhone 14 pro or in Pro right okay looks great at this moment now let's create the delete [Music] um method right so what we can do this time I'm creating delete API method first and we're also passing the route ID this is grid I'll play a sync task I action result delete product password ID okay bar for that 808 products.findasync by ID products equal null and you can return not found right the product is not powerful otherwise you can um delete by using remote method and then we have to execute or save changes async finally you can return ok right or you can also return with the product if you would like to use that product down the line so if we run the project so let's find out a project a product sorry let's take this one and then go to the delete try it out provide the ID execute and you got 200 status code and this was the product if we execute a game get all products we can see we have only one product available the other one is gone now we can invoke that method in our um UI we're gonna pause the stream right and it will return observable product so turn this CTP delete product on this URL API slash products slash the ID right so now we need to create that um on the product list actually on the product list products here here so now we want to create that router link so router link is gonna be empty because we are not sending I mean we are not navigating to any other pages on this example but you can extend that feature on click we are gonna invoke the delete product method can provide here product.id I think that should be fine for now so we need to create that um delete product method so it's gonna be under products dot component here so delay product and looking at the ID as a parameter let's see okay compile successful so you can console log the ID to make sure that is working as expected so let's open the inspect console if we hit on the delete we can see that um 80s login in the console which is great so what we have to do we wanna delete the product so we need to call the product service then delete product and I have to first ID simple and once we get back the response we want to subscribe the next um so once it is successfully done maybe we want to reload the page right so if we want to reload the page um we can do it in so many years this is one of the way you can let's take the current URL from this router your okay router navigate by URL and Escape location change equal true because we don't want to skip and then um we're gonna navigate to the current URL we are taking the current URL from the router and then again navigating to that current URL so let's see how it looks like if you want to delete it no any error happen let's see delete Okay so not found because product is gone but it did not reload the pages Okay so that is the issue um let's create another product um iPhone 13 mobile say gold 13.99 maybe save and if we click delete it's gone okay I think there was a glitch um so that is working as expected so this is a crude operation using angular UI bootstrap Entity framework asp.net web API I hope you enjoyed this tutorial if you like this tutorial please subscribe to my channel I will keep updating I will keep uploading new videos and till then bye

Channel: Ripon Datta

Views: 9,768

Keywords: angular, asp.net core web api tutorial with angular, angular crud with asp.net core web api, asp.net core with angular, asp.net core with angular tutorial, angular with web api, bootstrap with angular, angular crud with web api, angular with asp.net core, asp.net core crud with angular, asp.net crud with latest angular, angular with .het core and mysql, crud with angular and asp.net webapi, angular 11 crud with asp.net core 5, angular 13

Id: 4X8qcOIOupw

Length: 108min 24sec (6504 seconds)

Published: Tue Jun 06 2023