Angular 14 CRUD with .NET 6 Web API using Entity Framework Core - Full Course

hi there in this video we will go ahead and create a full stack application and we'll perform crud operations using angular 14 and asp.net 6 web api we will use entity framework core and create a new sql server database from the ground up this will be a great tutorial for beginners or if you want to refresh your memory let me take you through the app that will create we will create an employee list and perform crowd operations that is create read update and delete on these employees we will also add multiple components and multiple routes to our angular application on our home page we will show the list of employees in a beautiful bootstrap 5 table then we will have this add employee button on the top which goes to the ad employee page where we can add an employee on successful ad we will be routed back to the employees page we can also view this employee or any other employee by going to this view button and also able to update this employee from here finally if you are not friends with this employee we can delete them using the delete button and that removes the employee from the database this will be a fun tutorial and i hope you learned something from it if you like this video please hit the like button and subscribe to the channel to see more videos like this one with that said let's get started before we go ahead and create our project it is a good thing to check the versions of dotnet and angular that we have installed on our machine so to check the version of dotnet i will write the command dotnet hyphen hyphen version and i will press enter and it shows me that i have the version six installed on my machine so if you don't have that it is advisable to go to the dotnet website and install the latest version which is dotnet six as the time at the time of recording of this video and the second uh language that we have to check is angular so i will write the command ng hyphen hyphen version and i will press enter and it's showing me the version of angular cli which is 13.2.6 and we need to update this the version of node that i have installed on my machine is 14.17 so it's a good practice to update node as well because uh angular uses npm packages so i will go ahead and install the latest node version now that i have updated node.js i will just quickly check the version of it by writing node hyphen v and i am on the latest 16th version now it's time to update the angular cli and first i will uninstall angular cli and then i will install the latest version because i was running into some errors otherwise so i will first write this command i will write npm uninstall [Music] hyphen globally hyphen g at angular cli and i will give both these commands in the video description down below as well so that you can copy and paste it in your terminal so i have uninstalled angular cli and i will now install the latest version i will write this command npm install hyphen g to install it globally at angular slash cli at latest so this will install the angular cli version 14 for us and this has now been installed successfully i'll quickly check the version i will write ng hyphen hyphen version sometimes it doesn't show in the same command prompt window so it if it still shows you or it doesn't show you at all i'll close this window and i will open a new command prompt window and i will write ng hyphen hyphen version and the new command for the checking the version is ng version so i'll say ng version and it's loading up the version of angular cli and it tells me that that is 14.0.2 so our hyphen hyphen version doesn't work anymore so you have to type ng version to check the latest version of angular cli so hope that helps now that we have installed angular cli's latest version we have node.js and we have dotnet version six it's now time to create our project i have created a folder in which i will create my ui and the dotnet web api project and i also have a command prompt or a terminal window open and the terminal is pointing to the newly created folder so in here i will create two folders one for the ui so i will call this uh full stack dot ui and inside that i will create my angular project instead of the dot i'll just say a space and we will browse to this folder so cd full stack ui and inside this folder i will create the angular project i will write ng new followed by the name of the project so we will call this full stack dot ui and then i will press enter to create a new angular 14 project it is asking me to add angular routing i will type yes and press enter and to choose the stylesheet format i will i can choose any one but i will keep css and press enter on that as well it takes a few minutes for angular cli to create the angular project and once that is done you can see a folder inside the angular ui folder and with all the files that angular needs to run the project so we will come back inside here and i will open visual studio code that will be the group the code editor i'm going to use today to to work with angular and for the dotnet side of things i will use visual studio so i will browse one level deep to the newly created folder so i will say cd full stack ui and in this folder i want to run the visual studio code editor so i will say code space dot to start visual studio code with this folder so this is a handy little shortcut i will just click on this trust and i will say yes i trust the authors because i have created this and visual studio code has opened up the angular folder and if you are familiar with angular these all files are you know just the same as the previous versions of angular and you have your main source folder over here and the application folder in which the main file is your app.component.ts and the html file the starting point of the of the angular application is this index.html file where you can see everything looks like a normal html but you have this app root component or a new element which is app root now where is this component coming from this is a component or a template which is defined in the app.component.ts so if i open this you can see the selector app root over here and if we come back we can match this element to the selector inside the app component.ts so basically when the index.html loads everything after that is angular components and angular component html files so when we start our application this is the first component that gets loaded so let's start angular and let's open this in a browser to see what we get out of the box so to do that i will open a new terminal over here and once this is up i will say ng serve hyphen hyphen o to open this in a browser and i will press enter this usually takes a few minutes the first time you are trying to run the application but other otherwise it it's really fast our angular application has started and if you look at it it opens up in your default browser and if it doesn't open up it's usually on this location which is localhost colon 4200 and in my default browser it opens up and it opens this web page for us uh it's it's basically a a static page with some with some angular helps and documentations and you know links to other websites but we don't want that we want something of our own so we will go ahead and first clean up the application so i'll come back to the visual studio code and all that html that you saw is inside the app.component.html so i will open that and if i minimize the terminal you can see all the html that you saw in the browser over here is actually just static html written over here so i will select all of it but i will leave the router outlet tag over here so i will select everything and i will unselect the router outlet because i need that to perform routing in my application uh so router outlet is basically responsible for you know showing different pages uh or different components to your app.component.html so i will keep that and delete everything else from the app component.html and with that if i go back to the website you can see we have a blank slate so nothing is visible on here so now we will go ahead and install bootstrap so that we can use its components and style our application over here to install bootstrap in our angular application i will come to the bootstrap 5 website and this is the getting started page so i will come over here and copy the cdn this is the fastest way to start with bootstrap so our focus is mainly on the crud operation so i'll copy this command and i will come back and i will open the index.html file and after the link tag over here we are within the head section so i will paste the css and i will also paste the bundle javascript file so i will copy that and paste that over here as well so i have the css for bootstrap and i have the js for bootstrap as well so with that in place we can start building our components so i will first start with the with the header [Music] to add navigation to our website i will come back to bootstrap's website and i will search for a navbar and i will open the first page and if i scroll down you can have different types of nav bars as shown over here so i can just copy any one i need a simple navigation bar with one uh nav link so i can copy this and i can come back to visual studio code and inside my app.component.h above the router outlet i will paste this html now it looks intimidating because there's a lot of html but we don't need all of it we just need to change the nav navbar brand to call what our website name is that is full stack dot ui and that's the name of our website we will come back to the href of this later on and the second thing that we need is one nav item which will be you know a way for us to navigate within our website so i can remove the rest of the nav items and then i will change the nav item name to to call employees now we are creating an application in which we we can see employees and we can perform cred operations on employees so this will act as a way for me to route back to employees so that i can see all the employees and again we will come to the href for this later on and one more change that i want to make here is i want to make this instead of a container fluid i want to make it as a container so i'll save these changes and i will come back to my browser to see that i can see a top navigation bar over here the color behind is a very light color so i can change that as well i can call this nav bar dark and have a background of uh let's say bg dark or maybe black let's see how that looks like so save that it doesn't come up with anything so maybe a bg dark [Music] and save that so now i can uh see we have a navigation menu over here with one uh nav link which will be you know used later on but let's start with creating our first component and that will be you know the employees list so over here we will create a new component and we will make sure the routing works for that to create a new component i will come back to my code editor and i will first create a folder inside application so i'll click on this new folder icon and call this components inside components i will have another folder called employees and then to create a new component i will open a terminal window and first i have to browse to this employees folder so i will write cd source and then i will go to the app folder and then components and finally the employees folder so i am inside the employees folder and to create a new component i will write the command ng g for generate c for component and then i will give the name of the component which will be employees hyphen list and press enter to create that component the new component has been created and it is inside the employees list folder over here so i can come back now we have to do something so we have the employee list works this is just a paragraph which is shown inside the component but how do we see this component in this page over here which is the which is the home page so for that we will use angular routing and to add angular routing we will come back to the app.module.ts file over here so i will open that and i will minimize this we have the sorry we don't have to go to the app.module file we have to go to the app hyphen routing dot module file so i will come back over here and as you can see we have a const of routes defined which is an empty array but we will add a new object inside the routes so i will open parentheses and inside here it needs two things one is the path and that's of type string and the other is the name of the component that we are going to load when we go to this path so when we go to the home page which is the empty path we should we want to load the employee list component because we want to see the list of employees on the home page so if the empty path or the home page is selected we want to load the employee list component so i will say employee list component and that way when we open this part this component is loaded let's see if that works so i will save this and i will come back to the browser this is refreshed and you can see uh the router outlet is correctly loading the employee list component when the home page is selected now we want to do the same thing when the employees page is selected so i will go ahead and add another route so coming back here and i will copy this and paste another object just below and when i open the slash employees path i want to open the same component so i i save this and i want to make a change to the uh to the app.component.html inside our header where we had just a hash over in the here in the nav item we want to change this to go to slash employees now when the employees page is hit the app employee list component is loaded as well so i will go back to the browser now this is showing me an error because the routing cannot have the slash the app routing module so i will come over here and remove slash save that and refresh the application again so our home page correctly shows the employee list component and if i go to the employees page and you can see the route changed and the employee list component has loaded as well but you see there's a page refresh happening now angular we have created a spy application so we shouldn't be expecting this so instead of the href back inside my app component i want to use the router outlet sorry the router link and in here i will specify slash employees page [Music] so this will be just a router link without the parentheses because we are not passing any argument so if i use that and come back you can see if i hover over it it shows the slash employees page so if i go to the employees it works and if i come back to the home page it still loads the employee list component so that's all working fine we have the routing setup as well for the employees page it's now time to work on the employee list to show the list of employees so i will come back to my visual studio code application and i can close this now i want to show the list of employees but we don't have any employees at the moment so we will just create a static list of employees uh till the time we have created our uh.net application so that we can get the employees from the dotted application and from the database so i will create a folder called models i will create a folder called models in which i will have a model called employee so i will have employee dot model and i will export interface employee and this will have a few properties so the first property will be a first name so or i can just call this name and this will be of type string and then i will have a property called email which will be a string as well then i can have phone for the employee and this will be of type integer or a number and then i will have uh let's say a date of birth or a department or salary so i'll have salary which will be again a number and then finally i'll have a department which will be of type string and i have my employee model ready so it's time to populate this you know statically and then show it on the on the home page so i am inside the app listcomponent.ts and in the ng on init because when the application when the component loads i want to show a list of employees so first of all i will create that property i will have a public property called employees which will be of type employee array so i'll take the employee from model which will be of type array and i will instantiate it with an empty array after that i will want to add to employees so i will say this dot so this dot employees dot push and i can push a number of items in there so let's first create employees and we can basically instantiate our employees over here so i will create the first object and the name of it and i will quickly go ahead and create these but before i do that i want to create another property for the employee and that will be the id so that will be a unique id of type string i will store it as goods which will be later on but uh for for the timing i'll just give them one two three or different values so i will go ahead and quickly create a list of employees let's say about three or four and i will then push the employees so i have created a list of employees and i have three employees over here so i will push these i don't even want to push these employees now because i have the list already so what i can do is i can use this employees public variable in the html so i will come back to my employee lists html and in here i can remove the paragraph and i want to add a table so that i can loop over the employees that i have and to create a table i will come back to the bootstrap website and search for table but because i know how the table works like it's only a class called table i can come back to my code and start creating this so i will ah i will have all of this inside a container so div with the class of container and that's a bootstrap class as well and i will give it a margin on the y axis so a margin y of five uh both top and bottom so i will first add a heading so that will be an h1 tag which will say employees and after the h1 tag i will have a table so a table and that will have a class of table as well and to the h1 tag to create some separation i will have a margin bottom of three inside the table i will first have the headings so i will create a t head and inside the t head i will have a t row which will have a few th columns so that will be the headers uh the first one would be id the second one would have name the third one would have email then we will have uh we had the salary and the phone so phone and last one is salary so we have the d head defined now it's time to create the body for this table so t body and the t body will actually come from the employees that we have the static list that we have so i will create a tr and inside that i will have a few tds so let's say we have we want five tds like this the values of these tds would be coming from the employees and we have to loop to create those three employees so on the tr i will have an ng for loop so i will say ng for and i will say let employee of employees and this variable name should match the variable name that i have over here the public variable and let employee of employees and now we can use this employee field within curly braces like this and say employee dot id because the first column was id and similarly i'll have all of these variables the second one would be name then would be email phone and salary [Music] and we only want to show this table if there is uh an employee in the employees list so i'll say ng if the employees are defined then show this table otherwise you can show this paragraph that says no employees found and i will have an ng if on that as well so ng if the employees are defined then or are not defined then uh you can say no no employees found so to see this in action i will come back to my browser and we had three employees so we are showing the list of three employees on our angular website and as you can see it's populating all the details correctly which is the id name email phone and salary now in the case when we had no employees let's try that scenario as well so instead of that i will just assign this to a new array and save it and if i come back to the application it refreshes it doesn't show any employee but it also doesn't show the message so let's quickly check that now we wanted to show the table of employees so employees is defined but it's zero in number so we'll say in this and employees dot length is greater than zero then show this table and if employees are not defined or the employees dot length is is equal to zero or less than zero let's say less than equal to zero [Music] then show this message and i save this and come back to my application it says no employees found so our employees uh display or the list of employees that we want to see on the home page is working correctly it's it's a good time to uh start working on our angular project as well sorry the dot net project where we will create the api so let's go ahead and create our dot net 6 web api [Music] to create our dot net 6 web api i will come back to the folder structure where i have the ui so along with that i will create another folder which will uh which i will call full stack api and in this folder i want to install my or create my net 6 web api project so i will open visual studio and i have visual studio 2022 this is the latest at uh you know at this video so i will create a new project so i will click on this button [Music] and in here you can either search for it or you can scroll down to see asp.net core web api this is the project that we want to create and this is in c sharp so i will select that and click next from here i will give it a location so i will paste this path in which i want to create the dot net six api and i will give it a project and solution name so i will call this full stack dot api and click next after that it's asking us to select a framework i will select dotnet 6 which is the latest at the time of this video and i will have all the other options as selected so i will hit this button called create and this will create the web api for us so we have the dot net 6 a web api created for us and we have one controller which is a default controller called weather forecast controller and it shows a list of static values for weather forecast using this model so we don't want to use that we want to create our own controller which can use entity framework to actually you know perform crud operations and create read delete and update the list of our employees so we want to create a new controller over here but before we do that we have a dependency we want to use entity framework core so we have to install some packages first and to do that i will come over here to dependencies i will right click on it and go to manage nuget packages i want to search for two packages one is entity framework core dot sql server so the full name is microsoft dot entity framework core dot sql server this is the second one so i will select and install this package and when this is installed i will select or i will search for another package called entity framework core dot tools i will search on that and it's the first package over here i will select that and click on install we have installed entity framework now and it's time to create a new model for us that we can uh perform cloud operations on so i will create a folder called models [Music] and inside the models folder i will create a new model or a class called employee so i will call this employee.cs and this will have a few properties and if you remember from our angular application we had five properties so we will have the same five properties over here as well so i will i want to create a good of uh with the type of code and the name would be id this will be our unique identifier for the employee then we want to have a property with the type of string and the name of the property would be name similar to name we will have a string property of the name of email then we will have two number properties so two integers or a long for a number so i will have long phone and i will have let's say along for salary as well and the final field would be a type of string and that will be department and make sure your name matches the names of the properties that you have created in your angular application now if you are using dotnet six you'll see these uh squigglies that says uh it's the property is nullable or you have to you know have a non-nullable value when exiting the constructor this is because uh in the project if we open the project properties so i'll double click on this project file and you can see nullable is enabled and by default in dotnet 6 we have nullable enabled all the time so you can go ahead and disable this field and you no longer would be receiving the squigglies over here so i can close this now and the next step that we want to do is to create a db context if you know how entity framework core works we have to create a db context so that it can talk to our database it can be a sql server database or it can be a postgres database or whatever but for that we have to create a db context and i will create a new folder for that i will click on add a new folder i will call this data and inside data i will create a new class file and i will call this a full stack db context that's the name of our application and then followed by the word db context this class would inherit from db context so i will write that and press ctrl dot and i will use this uh library called microsoft dot entity framework core the one that we installed so i'll import the using statement and if i come back to this class and click on this so now that it's highlighted i will press ctrl dot and create a constructor with the options parameter so that when we give options to our class it also passes it to the base class so we will create a constructor for that and the only other thing required for our application is to create a property and that property will be of type db set and i'll explain that in just a moment so i'll create a property first so prop tab tab and then this will be of type db set of type employee the one that we created inside our models so i will press control dot and import the models from the models folder the name of the property would be employees and this dbset property is used to act as you know how we treat tables so entity framework core will look at this db context and it will create a new table called employees and using this property using this public property we are then able to access that table and communicate with it so with that we have the db context ready and it's now time to create a connection string before we go ahead and create the connection string i am using sql server to talk to my database and the server or the local server that i've installed in my machine is called this yours could be totally different so i'm copying the name and clicking on connect at the moment i don't have any database so i'll create one from scratch i will come back and inside my app settings.json i will have a new field defined which will be connection strings and inside the connection strings object i will have a new key value pair and the key name would be full stack connection string or you can have any other name and the value for this would be server is equal to the name that i copied this is my server that i have installed yours could be totally different followed by the database name now this database doesn't exist so the name that you'll mention here entity framework core will use that name and create a database for you so i will call this full stack db and after that we have to write trusted connection is equal to true trusted underscore connection [Music] is equal to true and with that our connection string has been defined now it is time to use dependency injection and inject the db context inside our container so i will open program.cs file and before we build the builder i will say builder dot services dot add db context this db context is of type full stack db context which we have over here so i will mention the name full stack db context i will import it from the data folder which is this one and after that we have to pass some options so i will say options such that i will come to the next line options dot we want to use sql server as a database so i will mention that use sql server and i will press ctrl dot to import this using statement microsoft entity framework core and inside data inside the use sql server method i want to pass the connection string so i will use the builder again and i'll say builder dot configuration dot get connection string and i will mention the name of the connection string i want to get which is this one so whatever name you have defined as your connection string use that and paste it inside the method as a string and now i can close this so now our db context is injected and we can use this later on inside the controllers to talk to our sql server database using this db context everything is now set up for us to create a database using entity framework core and to do that i will come to tools i will open new git package manager and click on package manager console inside here i will execute two commands the first one will be add hyphen migration and after that i can give the the name of the migration so after that i'll put a space and inside quotes i will write the name of the migration because this is the first migration i will call it initial migration and i will press enter to create a new migration so entity framework core uses the the package that we installed the tools package that we installed and it creates a migration for us and if you see over here in just a second we will have a new folder called migrations which is here now and if i expand on that it's just a class file with everything that entity framework core needs to create this new database and the new table called employees so i'll create i'll close the uh the class and the second command that i want to execute is to actually create the update the migration so if i come back to my sql server and refresh this i don't have any database at the moment but after running this command which is update hyphen database and press enter when this executes we will actually see a new database created inside our sql server database so this has successfully finished and if i come back and refresh this i can see a new database created which is the full stackdb the same name that we gave inside our appsettings.json if i expand this and under the tables we can see the stable employees created with the same columns that we had inside our uh our entity or the domain model so we have these um we have the table ready we have the database ready it's now time to create the controller action methods so that we can perform cred operations so for that i will create a new controller to create a new controller i will come to this folder controllers right click on it and add a new controller [Music] and from here i will choose mvc controller empty and click on the add button now i will mention the name of this controller so with the controller suffix i will write employees so the full name would be employeescontroller.cs and i will click on add now this is our controller and we have one action method over here but we will change this soon but before we even come to here we want to specify the attribute api controller to tell uh dot net the dot net framework that this is an api controller and it won't be having any views so we don't need the view over here now the first method we want to create is to uh is to get all the employees now i know our database doesn't have any employees but we will still start from getting all the employees so the the first method will be an http get method and i will also create a route for the controller now when the when the user goes to a certain url then we want to tell our dot net application to come to this http methods uh or like the get or the ad so the route for the controller level would be slash api slash employees you can either mention it using the full word called employees or you can just use in the controller name in square brackets so i'll mention controller and it will automatically take the name of the controller which is employees and it will map it inside the route so you can mention it anyway so now that we have defined the route we will act on our method so we it's it's going to be an http get method and we will call this get all employees and to get all the employees i will have the same route so anybody who comes to this application slash api slash employees will get all the employees so in here i want to make use of the db context to and use entity framework to talk to our sql server database so in here i will create a constructor for this controller so ctor to create a constructor and then inside the constructor i will inject the db context that i injected inside our services container which is over here so i will say full stack db context control dot to import the using statements and then i will give it a name and then i will assign this to a local variable and i can assign it to the same name or some people prefer the underscore thing so i can change it to underscore so underscore full stack db context it's a private property and we can use it inside our get all employees method now so i will call the db context dot and we know we have a property called employees because we want to talk to the employees table so i will mention employees so that's a way to talk to our employees table and we can return this as a list but we want to use make use of the asynchronous functionality so i will turn this method into an async function by writing async and wrapping this i action result inside a task so this makes our function asynchronous and we can use the employees dot to list async method so we don't have that by default so i'll come over here click on it and press ctrl dot and import the dependencies which is microsoft dot entity framework core and because we are using an async function we want to await on it so this will fetch all the list of employees that we have inside the employees table and we can store this inside a variable [Music] and once we have this inside the variable we can return the list of employees in an okay response so if you know uh in an http in a restful world we have the okay response which is a status 200 and we can then pass the list of employees inside that ok response and this will return the list of employees to our clients which in this case is the angular application so we have one function defined it's a good time to run this application to see if it's all working correctly or not so we have started our application and along with the weather forecast controller we have also the employees controller and we have this opening up in swagger which comes default in the latest versions of dotnet and that's very handy because now we don't have to use postman to call our apis so inside the employees controller we created a new method to get all the employees so if a user comes to localhost colon 7211 slash api slash employees they should be able to get all the employees so i will come over here click on try it out and click on execute and it's making a connection to the database now so it came back with the 200 and as i told earlier 200 means a success response but we came up with an empty list because we don't have any employees in our table employees inside the sql server database so we will create a new method to add a new employee and that way we can test this method again so i will close this application and come back to my visual studio and the next method we want to create is to add an employee so this will be a post method and uh i will call i will start writing this method so i will say public async task of type i action result and then i will call the the name of the method would be add employee and inside the add employee method we want to get something in the parameter because we want to have inputs from uh from the user so that we can create this new employee and for that i will use the employee model that we created and i can call this employee request now this is coming from body so i can annotate that with the from body keyword and when the employee request has data we want to first create a new id for this employee because we don't want to trust our angular ui application to pass the id we want to create it ourselves so i will have id is equal to and it's good so good dot new good and that way we always create a new id for our employee and after that we want to use all the same values that this employee request has so we will again use the db context so this dot employees and we have the add method or the add async method so we will use the add async method and pass the employee request that we are getting as a parameter to the db context and it says that we are using the add async method so we want to put the await keyword in front of it and this way we add a new employee using db context but we do have to save changes so we will call the db context again and call the save changes async method and using that we we should be able to add a new employee so if we do that after that we can return an okay response of this newly created employee and by that way we have this new add employee method ready so it's a good time to test this as well so i will run this application again this time we want to test the post method which is the add employee method so i will expand this click on try it out and it gives me a new id by default but we don't want to pass any id from the ui so i will remove this and i will put some values in so i'll say john doe i'll put some email a phone number and then some salary and finally the department and if i execute i want this to be created inside my database if i scroll down i see the 200 request and i have the object the employee that was created inside my database returned back to me it has an id field as well and all the fields that we passed to it just to confirm i will come back and i will do a select top thousand rows and as you can see we have a new row created which is the same details as we passed to the to our web api so our add functionality is working this is good progress and we have created two methods inside our api and that is the get all employees and the add employee method so this is a good time to come back to our angular application and make use of these two functions so i will come back to my angular application and before we were using a static list we don't want to use that anymore we want to call our api and show the list of employees from the database so i'll quickly go ahead and add a couple of more employees using the same api call and then we will go ahead and fetch the employees from our angular application now we want to make use of the angular application and talk to our api and to do that we use services to call any external apis and to create a new service i will first create a folder called service so inside app i will create a folder called services and inside services so if i come back and browse to services cd services i want to create a new service so i will say nggs to create a new service and then the name of the service would be employees and press enter so we have a new service created inside the services folder so i will open employee.service.ts file and in here i will create a new method which will be able to talk to our.net 6 web api and i will call this method get all employees and to you to be able to talk to the external api i need the http client and i will inject that over here so i will call i will say private http and that's of type http client now for some reason uh the visual studio code is not able to tell me where the library is so either i have to import it manually or i found this other technique online where you have to go to ts config and over here at the end i can i can say uh type roots so i will actually copy this and paste it over here so you have to import these lines so you'll say type roots which is an array and it has these three values node modules slash types node modules slash angular and also node module slash angular slash common slash http and that's the path where we want to get the http client module from so i will save the config file and close it and i will wait for this to initialize [Music] and once that is done i will come over here again and press ctrl dot and now i can import the library which is the http client module from this file over here and now we can use this http uh private variable so i will say this dot http dot get because that's the gate method to get all the employees and it needs the first argument it needs is the url so let's first save the url inside the environment file so i will open my swagger to copy the url so copy your url and come back to the environments folder over here and inside the environment.ts file i will say this is the base api url and inside a string i will paste the localhost url i'll save that and i can close the environment file now and i can directly use the environment file inside the service so i'll create a variable here which will be base api url and that will be of type string and is equal to environment dot base api url so we are getting the values from there and we can use that inside our methods so the way to get all the employees is by going to this url after the base url so slash api slash employees so i'll do the same thing over here i'll use the base url so this dot base url plus uh and that's a string slash api slash employees and that's the full path to the get all employees and because this is a get method and it returns an observable we can return an observable from here and that will be of type uh this skate method will be of type a user so i will sorry employee so i will say map this to the employee array object and then return this [Music] and also i will add an observable type or return type of observable and inside that i will pass the employee array so our get all employees method is ready uh it's now time to use it and we have to use this from our app uh from our employee list component so i will go inside components and i will open employee list dot component dot ts file and i can remove the static list of employees and replace that with an empty array so if i save it and if i come back to my angular ui when it refreshes you can see there's no employees found because we are not a talking to our database at the moment so we have our empty list here and in the ng oninit method we will use the service and the way to use the service is we'll have to inject that first so private [Music] employees service which is of type employees service now we have injected it and now we can use it we'll say employee service sorry this dot employee service dot get all employees which is the method that we created and because this is an observable we have to subscribe on it to make it to work and we will say dot subscribe inside the subscribe method i will call the response so next [Music] and i will have the employees coming back and what i'll do is i'll first log these employees to the console so console.log and then employees and i could also log the error response so error response such that and i'll copy paste the line so that i can console log the response coming back as error so with that uh there's another change that we want to make and that's injecting the http client module so that we can actually make http calls and that's inside the app.module.ts file in here under the imports array i will add the http client module like that and then save the changes and if i come back to my application again it shows no employees but if i inspect and go to the console it says that we are getting a course error so we can see we have a cross origin request blocked the same origin policy disallows reading the remote resource at our api with a status of 200. so all of that is because our browser disallows from this url which is 4200 to go to our api url which is 7211 because it's different urls course policy disallows that so what we want to do is we want the api to tell that who should consume our requests so one change that we want to make inside our ap api is i'll stop the application is to come in the program.cs file and enable course so there's a few ways you can enable course and the quickest way would be to come over here and after app.httpsu direction we will say app.use course and we will pass a few options in here which is this so we'll say policy such that policy dot allow any header dot allow any method and then allow any origin so what that means is we are allowing any origin that means we are also allowing our angular application to talk to our api and any method is allowed and any header is also allowed so with those changes i will start my application the web api again and let's try to consume the web api from the angular application again so make sure this is running and i will come back clear this console and i'm just waiting for swagger to open first so swagger has opened i'll minimize that and i will refresh this page and as you can see here we got an array of three items which are the employees that we want to show uh on our angular application and this is being returned from the dot net six web api so we are getting the response back it's now a matter of mapping our response to the employees list and showing them on here so i can close the console and come back to my angular application and i can close these two files in here where i am consoling the response i want to show these employees uh to the uh to the employees list dot html and i will now populate this variable so this dot implies and i will take the values coming from the response so this dot employs is equal to employees and when i save changes everything else remains the same because we were using a static list before and if i now come back to my application you can see three employees getting returned from the database and if i select on this again i'll show you we have three employees and this might be different or this might be the same i just use the same static data but this time it's actually talking to our dot-net api to talk to the database and getting the results back if you remember we also created the add method to add a new employee so let's create a new page inside our angular application and maybe a button over here as well or on the top nav to go to that new page so that we can add the details to the new employee and call the api again and to do that i will first create a component so i will expand this i will open a new terminal and i will browse to components first so cd so i will go to cd um and then source app components and then inside the employees folder i want to create a new component so i will write ng gc and then the new component will be add hyphen employee and press enter to create that component so the component has been created over here so if i expand on components we have two components now the new one is the add employee we want to add routing to this new employee component and to do that we will come back to app hyphen routing.module.ts and inside here i will add another object and i will say when i go to this path employees slash ad i want to open the add employee component so save that we have a new path defined so i will copy the url and we want to create a new url inside our header so for that i will come back to the app component html here's our header over here and i will create a new route so i will say i will copy this li paste it over here and then i can remove this i will change the router link to say employees slash ad i'll bring it to the second line and the name of this link would also say add employee or you can say add new employee and with that change i will come back to my browser and you can see this new add employee button over here if i click on it it goes to the employees slash ad page and you can also see the new component getting loaded so it's now time to work on this add page for that i will come back to my visual studio code browser window and i will minimize this as this as well and i want to open the html page for the add employee i will first remove the paragraph and start with the container again so div with the class of container and i also want to add a margin on the y-axis and number five which is a big margin and inside that i will first add a heading and that will say add new employee i will give this a class of margin bottom of three i guess maybe two uh i will just quickly check what i gave which was three so i will give it three again and after that we want to create a form so i will create a form i will add the action later on inside the form i want to add a few fields so i will come back to bootstrap to see how we can add a form and i'll say forms i will open this page and we want to form similar to this so i can actually just copy this one the html and come back to my code editor and paste it over here so we have form already so we can get rid of one form and inside here we can see the first is email address we want to add a name first so let's change this html i want to add name i can get rid of the for and then the it'll be an input type of input of type text the class is a bootstrap class so we will keep it and we will change the id to name and we will give it to the for field as well and i can actually remove this area described by field and also this helper over here so i will copy this and i'll just remove the other two divs so we only have one input and one button i will save it to see how it looks like on the screen so i'll come back to my application and here it is you can if you want you can decrease the size to you know only show it halfway uh and let's quickly do that as well so div uh with the class of row and inside the row we will have div with the class of call six which is only six columns and we will put the form inside over there and if i save it let's see if that works yep it does so we can only see the form till half of the width which is six columns so we have the input for name uh there's a few other things we want so i will copy this we want email so i'll change this to email and then i will give it the id of email and the type as well so if i save it i'll refresh this i can see an email over here and i will do the same thing for the next few next few input elements as well so next we need is i want to see what we need so i'll go back and see phone salary and department so i will first add phone number so that will be with the label of phone within four field of phone and id of phone as well this will be of type number so that the form restricts us to only add numbers and i will copy this to create a salary a salary input and the id of this input field would be salary and it's again of type number and the last one we need is of type text and that will be the department and that was our last input element and finally we need a submit button and we can just call it submit or save let's call it save and if i refresh it this is the form that we want to fill and the values of these this form will go to our dot network api and then uh insert those details in the database so it's now time to actually work on this form and we will start by the form tag over here i will give it a form tag and then that will be ng form and because we are using ng form over here we want to add the forms module inside app.module.ts so i will open that again and inside the imports array i will add forms module press that and save it and you can see the error is now gone uh after that i want to bind the input elements to a model inside the add employee.component.ts file so i will open that first which is this file and i will first create a new variable a public variable and i will call this add employee or you can call it employee or add employee request and that is of type employee and we want to instantiate it as well so we will first we will give id of blank and then name of blank as well so we will define all the properties uh then was the email [Music] we will have the phone as zero and then the salary as a default of zero as well and finally the department of empty and we will use this to bind this variable to our form and for that we make use of the in the data binding technique in angular and we use the braces and we specify ng model is equal to and in strings we say the variable dot the property that we want to bind so this is the name property so we will say this dot name and along with that we also have to specify the name attribute so name is equal to name so i will bring this to the second line so we added two fields two properties which is the ng model and the name property we will do the same for all the other input elements as well so name for the email would be email and then ng model would be this dot email a similar thing for the phone as well so i'll bring this to the second line and i will have a name attribute of phone and then ng model would be request dot phone after that we will have uh the same for the salary [Music] and then the last one would be the department so we will have department as the name and this dot department so we have our input elements properly binded inside the form we want to say when the form is submitted we want to you know talk to an action inside the typestrip file so here we will say on submit which is ng submit we want to call the add method so let's say add employee method so we want to call this method but this method doesn't exist so we want to create it i will come back to the typescript file and after the ng oninit method i will define this method and when this method is hit this variable will be populated so i'll log this to the console first to see if its values are coming properly or not from the form so i have this logged to the console and saved it and if i come back this is getting refreshed i will open the console again i will start with the form first so i'll say i'll just mention my name again and just before i save it i'll just clean this and save it so you can see the object getting populated and with all the values for department email a name phone and salary we don't want to fill the id because that's the job of the api to fill the id for the ad employee so we have this this form working it's now time to create a service method so that we can pass the values from this form to the service which will then talk to our api so i will open the service now open employee.service.ts and create a new method called add employee this takes a parameter which is employee or add employee request and that will be of type employee and inside the method i will use the http uh library again to call the post method because it's an ad functionality uh according to restful apis we that's that should be the post method so inside the post method the first argument is the url again and if i show you in swagger the post method also follows the same url as the get method so localhost 7211 slash api slash employees so i can actually copy the url from the above method paste it over here and then it needs the second method which is the body and we have the body being passed which is the add employee request so i will actually pass the request inside the http post method now we know that this returns the added employee back so as a mapping parameter we will map this to an employee and we will return it and we also want to define a return type which will be of type observable and employee so our add method is now ready in the service and ready to be consumed from the component so i will come back to this component and call the service from here but it doesn't have any service so i'll inject that first so private employee service is of type employee service and i will say this dot employee service dot add employee and this receives this parameter which is coming from the form and i'll say this dot pass the request to the service and because this is an observable again we need to subscribe to it before we can actually trigger it so in the subscription we will have the next we will have the employee the added employee coming back as a response so we can actually console log the employee so this will be employee over here and you can also show the error message in a similar fashion actually as we did before so i'll save this and i will try to fill the form again let's say james d uh james dot d at email dot com the phone number is any phone number and some salary and the department is id and if i save this now at the moment we only have three employees so let's save that we should get something in the console [Music] i can't see anything in the console just go on and confirm by clicking over here execute so it did not happen so anything nothing happened and we can't see anything over here as well so let's see why when this function is called this dot employee service dot add employee and let's see if that is working fine we it's a post method and it's going to the base url slash employees and this is the body that we want to pass so this looks to be okay i will just do it one more time after the refresh so i'll refresh this again and i'll clear this before so this will be james d the email is that some phone number and some salary department is id so before i click console just clear it and save this so it's giving me a 400 error because it says i'll have to read the error first [Music] it says one or more validation errors occurred and if i see the json value could not be converted to a system.guide because it was expecting the id to be a good but then we weren't returning any id because we don't have any id so as a fix for that we can just return an empty uh grid so before we send this request to the to the service to the web api we will come over here and say add employee request dot id and we will override it with an empty grid which is all zeros so if you search for an empty grid you'll get this value uh and it's basically we'll override this value anyway in the api uh and this is only for demonstration purposes so we'll do that and then try to call the api again so refresh it [Music] i'll just go back to my ad employee page and here i will enter the values again and this time when i save it i should get a success response back which is nice i'm getting the object back of the newly created employee as you can see we have the id generated for that as well if i come back i'll show you if i execute this query again we have another employee added and our crud operations which is you know getting all the employees and creating a new employee is working correctly now now we want to do a smart thing over here when this is successful we should be redirected back to the employees page and to do that i will come back to my application and inside the add employee component where i'm just consoling it rather than consoling it when this is a success response i want to navigate back to the employee list so to do that i need a router and i will create another private variable called router and that is of type router so i'll import that and now i can use router so i'll say this dot router dot navigate [Music] and then we pass the link back to the employees so employees and this needs to be inside brackets so inside brackets will say navigate to employees so save that and let's test this by going back to our application and refresh it i'll just make an another entry so let's say just quick one and and save it and on save you can see it got redirected back to the employees page and because the employees component was re-rendered we also got the new employee that got added with all its details so this is working quite nicely the next step is to actually view an employee by maybe having a view button over here from which we can actually view the employee details and also uh able to edit and delete that employee so the first thing we'll do is we'll create a new component let's say the edit component and populate the details of this employee or any employee that we click on so we will go back to our application and we want to create a new component first so i'll expand this and i am inside employees so i'm in the correct folder i will say n [Music] n g g c to create a new component and then the name of the component component would be edit employee and press enter to create that component so we have created a new component over here and the first thing we want to do is to add routing for this component so again i'll just close the existing files and open app routing module and in here i want to specify another route that says when i go to edit slash i want to pass the id so i want to get the id from the list of employees and dynamically pass it as a route param so i'll say colon id and then on this path i want to load the edit employee component so edit employee component and our routing has been defined um so i want to now add a link inside my table which is in the employee list so i will open the html file and i will add two things one will be i'm also missing the department so let's add the department really quickly so department which is the header and department as another td [Music] and the next thing i want to add is that view button that i was talking about so i will add a header which can be just a space because i don't want to have any name for the header and as a value for that row or the column uh i want to have an anchor tag so an anchor element which has a router link and the router link and the name of the element can be just view to view the employee and this time i will pass the router link in square brackets and then as an array i will pass two things one will be the word edit because it has to go to slash employees slash edit so before that i'll say employees or it's just employee i guess uh let's quickly check our routing again so yeah it is employees with an s so employees comma the next one will be edit and the final route value would be would be the uh employee dot id so i will pass employee.id in the router link as well and i have saved that and to show you what i mean i will come back to my application and we have a new button called view and if i hover over the view button you can see on the bottom left side of the screen you can see the link that is going to uh localhost 400 4200 slash employees slash employees so we have an extra employees over there which we want to remove so i will come back [Music] and i want to specify this like with the dash so refresh the application again and now it's going to the slash employees and it's not going to one level down so we have the anchor elements defined and by clicking on this it opens the edit employee component so our routing for this new component is now working and showing the id in the path as well what we will do is on the page load we will try to get this id and we will call our api to get the details for this employee so let's do that and first i will add some html i will come back to my code and i can close this and open the edit employee html i don't need the paragraph so i'll start with div dot container and actually i can just use the same html as we had for the add employee so copy all of it and we might have to make some minor changes on the top i'll say edit employee and after that i will remove the ng on submit method from here at the moment we want to display the name we also want to display the id before this uh so i will copy this and before the name i will have another div with the label of id and the id is id and the name is id this is a text and let's make this a read only and for the ng model we don't have this at the moment we'll come back to this later on but we need name email phone salary uh department etc and we'll have a save button at the end which will trigger the uh the form to save save our employee the next thing we will do is we will come to our edit employee component.ts and we will try to read the value of the id that we are passing in the route inside the ng on init method so for that we need to inject activated route um and for that i will say private route is of type activated route and now we can use this private field so i'll say this dot route dot pattern map and this is on an observable so we will subscribe on it and inside the subscription we will say next so when we get the response [Music] so that's the params we get all the params in the response and we will consume the params so we'll say params.get and we would want to get the params with the id with the name of id and that's the same name that we defined inside our routing module which is id so we want to get the the same name so inside strings i'll mention id and i will save this to a constant by using this id i will first check if id is not undefined i want to call the api now i want to call the api to get all the information on this employee with id of this but we don't have any function at the moment that does that so let's create a function i will come back to my api and create a new method over here that will be an http get method as well [Music] and i will also define the route the route will be an id inside curly braces and to make it type safe i will assign the keyword guide with it and after that i will start my method task of type i action result get employee that is the name of my method and as the parameter to this method i want to use this id that is coming in the route so i will say good id and this would match the name should match over here and just to make it more descriptive i will say this is coming from the route now we can use this id to query our database and you know how to query the database using the db context dot i will use i will go to the employees table dot first or default async i'll use the async version of this x such that x dot id is equal to id and i will save this inside a variable and because this is an async method i will use the await keyword so i will say where employee is equal to this once we have the employee this could be an employee that is null because the id doesn't exist so the values coming back is null so we will check first if employee is equal to null then we return a not found error back otherwise we return the same okay response and we also pass the employee details back and that finishes our method uh it's now time to consume it so i'll first start the api and i will come back to my angular application and to call in api we want to use it from the service so i will create a method inside the service first i will name this method get employee so this is my swagger running so i have that behind the scene so get employee [Music] and i will use the http client again so this dot http dot get and i want to go to a similar url but i want to also pass the id to it so slash i want to pass the id that is coming inside this method is of type string so i want to pass the id as well and and when sorry not as a comma as a plus and when this returns i want to map this to an employee object so return this and also give the return type to this method it's always a good practice this is of type observable and it's returning an employee save that and our service method is ready it's now time to consume this method from the component so i will call the service from here and to do that i have to inject it private employee service is of type employee service and i can use this employee service over here inside the if condition this dot employee service dot get single employee it needs an id and we have the id available to us and to invoke this we have to subscribe on it and let's use the next property and it returns a response [Music] and we will assign this response to a local variable so i will create a local variable a public variable called employee details that will be of type employee [Music] and we have to give some default values to it which i can copy from the add employee component from here to save some time and if i paste it it's happy and i will assign this from the response so this dot employee details and assign the values from the response to this one so we have this ready we just have to fix the html because we have to bind the values from that local variable now which is called employee details so we will change the ng model from add employee request to employee details [Music] and this should be id so save that and uh everything should be working successfully let's quickly check if i return this is trying to load again and nothing happened and now it happens because it takes some time to talk to the api so if i come back to the employees page and i try to view any employee let's say james d and if i view it you can see the values getting populated inside the form correctly now that we have the form populated correctly uh it's now time to work on the edit functionality or the update functionality so using the save button should trigger a method call to update the api uh and let's quickly add the method so on the form we will say when the form is submitted so on submit we want to call the update employee method and we don't have the method at the moment so let's create that inside the component will minimize ng on init and create this new method over here and the values of the employee will be coming from here and let's create the service and even before that we don't even have the api call for it so let's create the api call first so i'll stop this [Music] and create the put method which is update so http put method and the route for that would be similar to the get because it's acting on a single employee public async task of type i action result and this method will be called update employee this actually takes two things one is the id from the route so i can copy this from here and it also takes the employee object that we want to update so update so that's the employee object and the name is update employee request and if i come back over here now we want to first search on this employee and we can do that by calling the employees table from the db context dot i can use the find async method as well and i can pass the primary key which is the id to it and this should return a an employee if i name it correctly and now we can first check if employee is equal to null that means the employee was not found we will return our not found method error back and if it was found then we need to update it so we don't want to update the id but we want to update this employee from the request so name is updated from the request dot name and similarly we also update the other values like email salary phone and department so i'll just quickly change this request to take the values from its respective properties and once we have the update done we want to call save changes async to actually save this to the database and when the save has been performed we will return an ok response with the updated employee and that finishes our update method as well and let's use that so i will run the api again and come back to my angular application inside the service i need a new method so i will call this method delete employee and here's my swagger running so delete employee this takes sorry not the delete employee we want to update employee first and update employee takes two parameters one is an id of type string and the other one is the update employee request and that is of type employee and using the http client i can call the put method on this url the url is the same as the gate method as we saw in the route so i can put it over here and then it also needs a body which is the updated employee request so i can pass it over here like this and as a result i want to map this back to an employee and finally return this and i will also add the return type of this method which is observable of type employee so we have the update employee method ready as well let's consume that from the edit employee component and inside here i can call the service so employee service dot update employee method it needs two things one is the id which can be taken from here so employee details dot id comma and employee details itself it's throwing me an error let's see why [Music] so it's saying cannot find employee details oh i have to call i have to say this dot employee details and this dot uh employee details its object so it's a constant thing when you switch between angular and asp.net you just forget the keywords over here um so when you call this method you want to invoke it using the subscribe method and inside here on the next property when we have the response coming back if this is a success response we want to send this back to the employees list and how we did in the add component.ts so i'll just copy this router navigate functionality paste that here we don't have router at the moment so i will also copy the injection from the constructor so i will say i will go to the add functionality and i will copy the router over here and i will add this to the constructor [Music] and when you add it you also have to import it [Music] so using the router i will return back to the employees page if the call is successful so it's now time to see if it's all working correctly or not this is the employee let's say james d but we want to make it james c and we change the email also that's phone number to something like this let's say i've increased the salary to 90k and the department remains the same so if i hit save it goes back to the employees list and james d now becomes jmc all these values are coming back from the db so no matter how many times i refresh it it stays the same and also the table in our sql server database also changes [Music] so we have implemented the crud operations it's just one left we haven't implemented the delete at the moment uh so let's quickly do that as well so when we are inside the form we also want another method or another button over here that calls the delete method but before we do that let's first add the api call for it so i'll stop the application and i will create the delete method the keyword for that is http delete and the route will be the same as the put method because we want to act on a single employee so we want the id for for that employee i will start creating the method we will call it delete employee and the id property would be coming from the route so i will copy that from the previous method as well and we just need the route so we will say if the employee is found in the database by going to tb context tables find async if the employee is not found so let's say if employee is null then return are not found and if it was found we want to remove it so we will call the context employees dot remove function and we pass the employee to it so we want to remove this employee so we will call that and then we will call the save changes so don't forget to call save changes whenever you talk to the context and finally you can return an ok response nobody or you can pass the deleted employee back if you want to show any details of that employee it's up to you we have this ready so i will start the api again and in the meantime i can come back to the angular application [Music] so i will minimize this first and inside the service we need another method which will work with the api to delete the employee so i will create a delete employee method and this takes an id which is of type string and returns an observable of type employee and i will start my function i will use the http client again to delete and it goes to this url with the id of the employee to delete and just that and i can map the response which is an employee and return the result back so it's as simple as you see all of these follow a similar pattern now we have created the method in service it's now time to consume it so inside the edit component we will create another method called delete employee which takes an id and this is of type string and we will use the employee service to call the delete method and pass the id to it but we can only invoke this once we call the subscribe method and inside the subscribe method when we have the success response back we want to navigate back to the employees page because there's nothing to show so we will navigate back to the employees page and now we have to call this from the html and also pass this id so i will add another button [Music] over here and the type would not be submit because we don't want to submit the form this time it will only be a button and not a submit type and we can call this danger [Music] to show it as a red button and we'll have the text of delete over there so let's see if it's actually showing up correctly or not i can see my swagger didn't load correctly so there was something wrong in the api so let's see why that happened i was actually looking at a different window if i refresh it it just refreshes fine so no panic over there uh i will come back and we wanted to see the delete button so we have the delete button they are sitting very close to each other which i don't like so i will put a margin right of five uh to the save button and that will push the delete button to the side which it doesn't uh but yeah we can we can have a look at that later on but on the delete button i want an on click event so i will say i will have a click event and then on click i want to call this delete employee method in the component and also pass the id so i the id of the employee that we want to delete so this dot id i will bring this to the second line and as you can see on the click event i'm calling this method with the id as well so i will save this and let's see if we can delete this employee so we have the employee details loaded if i click this button we should navigate back to the employees page which it does and it also deletes that employee just to prove that again i will delete this employee and click on that and it deletes that employee as well i loved creating this tutorial and i hope you enjoyed that as well i hope it gives you a good understanding of how crud operations work in both angular and asp.net if you like this video please hit the like button and subscribe to the channel so you see more content like this thank you for watching and i will see you all in the next one

Channel: Sameer Saini

Views: 231,392

Keywords: asp.net core web api, asp.net core api, asp.net core crud, asp.net core crud with entity framework, asp.net core crud with angular, angular crud with web api, angular crud with asp.net core web api, angular crud, angular crud tutorial, angular with asp.net core, angular with web api, asp.net core with angular, asp.net core with angular tutorial, Angular 13, Angular 14, Angular 14 crud, angular 14 tutorial, angular 14 crash course, angular 14 full course, .NET 6, .net 6 crud

Id: CdE6rVfPJ9I

Length: 118min 4sec (7084 seconds)

Published: Wed Jun 22 2022