CRUD with Angular 14 & .NET 6 🚀 Web API, EF Core & SQL Server

hello my friends welcome back to the channel my name is patrick god and if you don't know me yet well i mainly create web development tutorials on this channel here and mainly this is actually about.nets.net 6 and blazer but many of you have asked for an angular tutorial meaning combining angular with a.net web api and this is now the tutorial for you angular 14 came out couple of weeks ago two weeks i guess two or three weeks so now is the perfect time i guess to have a look at the full stack meaning we will create an angular simple angular front-end an angular client the user interface will be made with angular and visual studio codes and then we will call a web api so this is also one thing we will create here in this tutorial 1.06 web api and combine this with entity framework core and the sql server database so again the full stack all crowd operations will be covered there we will build a little form with angular where we can create super heroes i know that you can do this in the tutorials and the documentations of angular as well the tour of heroes tutorial for instance this is actually not really inspired by this thing apparently many people like superheroes at least i like superheroes as well but anyways we will create a little superhero database meaning we will have one table one entity with the name the first name the last name and the place of a superhero of course also the id and then we will get these superheroes from the database first we will start with mock data so this is not stored in the database but i think this is a good way to learn all that stuff to learn these concepts so we will build up on this thing first we start with the angular client where you have a little tiny table with a great design where you can see the heroes and then we will move the mock heroes to the web api and then finally to the database update it and delete it so this is what you're going to learn and one more thing before we start if you like this tutorial and really learn something this would be really nice then i would really appreciate it if you click the like button and maybe even subscribe to my channel it does make a difference thank you so much for now 19 000 19 000 subscribers i love every single one of you thank you so much for that and don't forget to hit the bell icon to get a notification for new videos and also maybe interesting for you is the newsletter i promise i won't spam you at max i send an email once a week but with that you get these videos here earlier in your inbox and also access to upcoming courses for instance the dotnet web developer bootcamp where we will create lots of.6 stuff or 2.7 stuff let's see with the web api for instance with blazer and also with kits and a little bit of scrum devops all that stuff is going to be covered in that course so maybe this is something for you and the last thing and then we will actually start with the tutorial thank you so much for all your support today it's a hot tea no coffee these are so great yep kind of hot and if you want to support me as well then just check the links in the video description you may know the drill toddler is asleep and this is the only time i get to make these videos and coffee and tea helps with that so thank you very much and now enjoy the tutorial all right you see an empty folder here that's because i want to create two different applications in this tutorial one for the client and one for the api and for the angular client for the user interface i want to use visual studio code and for the api we will use visual studio 2022 community edition good way to develop that kind of stuff i guess because for instance you could also switch the ui and if you want to build a mobile application later then you can still use the same api right so this is how we're going to do this here now again i created a folder called superhero ng for angular and now we just right click here open with code to start with our user interface and in the terminal now we can build our new application our new client application with angular but first let's check the version so with ng version you see the installed angular cli version which is 14.0.2 and regarding notes we've got 16 and so on and npm 8 and so on and this is what you have to install first right so if you did not do this then please google for note for instance and then just download the latest version 16 and regarding angular let's have a quick look here there it is i assume you already know this but if not you have to run this command but also if you're using windows like me and you want to use the powershell you also have to run this command here so please go to angular.io guide setup local and then run this thing to get angular and to be able to run the commands because this terminal here is a powershell as you can see here we can also open a git bash a command prompt and so on but uh the default way here is the powershell so i would say we create our client application engine u is the right command for that and we call this super hero ui for instance for user interface yes we use routing and we use css and now we're getting our client application all right we're done this took way longer than i expected but this is the note world right so this is how this works we've got our folder here now let me reopen visual studio code real quick in the proper folder here so right click open one of the file let me open the folder open with codes there we are so now we've got our angular application we've got our typical source folder i really don't want to go over everything here this should not be an introduction to angular and um well i guess you know the drill you've got your package json package lock json and so on but the important part for our angular client here is the source folder with the app folder assets environment and so on and of course the index html again i think you know the drill this is not a beginner's course about angular we just want to connect angular 14 now with the 1.96 web api backend and all that in one big tutorial so that's why you're here right first thing i want to do here in the app folder is create more folders meaning the components folder the models folder and the services folder because we will do exactly that we will create a model a service and one component i really want to keep this simple here so right click the app folder and then again compo nance that's the first one then we've got our models and this will be our super hero model if you watched my other tutorials then you know what you're going to do here but if not welcome to the channel thank you so much for watching what i want to do is build a teeny tiny superhero database right so a database which would be a secret server express database in the end where we just store superheroes with an id a name the first name the last name and the place no big relationship or anything i did this in my other tutorials please have a look for instance at the uh all really ef core and frame record all relationships tutorial for instance i think this is the correct name there you will also see how to build all the relationship types meaning one to one one too many and many too many but this is not the topic for today today we create our angular application and let's start now with our model or first let's run the app maybe so we see that this actually works so ng surf dash o for open shall be the right command here take some time again and then we are good to go all right there it is on my other screen this is the default angular application and we will remove everything and then have a teeny tiny page and a small form uh where we can then uh use all the crowd operations for the superhero and it won't look nice can tell you that already but anyways now the model so let's close this and create a new file here and this shall be called super dash hero ts and one more thing i think i forgot to mention this i've got one extension here the angular language service this is pretty handy extension provides a rich editing experience for angular templates both inline and external templates including yada yada okay so this well maybe you you want to install this as well and now regarding the class looks like that export class superhero and now again we've got an i d it can be nullable then a name which is a string the first first name which is a string last and last name it is late again as always guys last name and the place okay so this is our model and now i would say we already create our service so this thing then will make the web service called but in the beginning we return mock data just to see how this works with angular in itself and then we will add the api there so to do that we open the terminal again and go to source app and then services and with ng for generate service maybe let's get some space here so ng gs and then super hero we create our service but i also want to skip the test files so this shall be the command ng generate service super dash hero there it is now this is our beautiful service here and now if we would want to make if we put if we would want to make here that's correct uh web service call meaning using the web api later on then we would have to use the http client module here and we have to add this thing later but for now let's just create one method called get superheroes and return a mock hero all right so this should be everything for now and then we will call this method and see does this already work so this is the first well it's not really boilerplate code it's already a bit more i guess but anyways let's just do this so public get super super heroes all right returns an array of superheroes and now let me get one hero or create one hero a new superhero i know i could have used the constructor here but i don't care so id is one name spiderman great guy first name is peter last name parker and then the place is new york city and then we return this hero as an array that's why i use the brackets here javascript and typescript yeah no comment about that so this is the method now and now let's let's let's just see let's just get this hero and display it in a list in a table and we do that in the app components so first we remove everything here for the html and then let's let's first let's let's first call this method and lock this then in the console so here in the component ts actually we now add our heroes so this is a super hero array we initialize it as an empty empty array and then for the constructor we inject the private super hero service our superhero service all right and then on in it so with ng on in it let's also called this so our heroes then are this superhero service get superheroes and then we just lock them first all right and this is how we can actually already test this so back to the terminal run this again with ng serve and let's see all right there we are empty page but we open the console and there's an array and there is our hero let's run this again works nice okay so this was easy now let's create a little table in our app component html yes a typical old school table where we just display our heroes so we start with a table like that then the header and in here now some headings first the name and then also the first name like that the last name and finally the place and now for the body we use a tr and here we also used a for loop so ng4 and now for every hero in heroes we say we've got the hero name lowercase n of course and let me know just copy this first name last name and the place so we've got the last name the no first the first name right that's why it's called first name and then the last name and finally the place okay let's have a look there it is but we have to add something euros this heroes heroes let's have a look let hero not in shall be off okay funny that i don't see an error here do i see one heat no everything's fine here and now we see spider-man okay great so this one was a little error it is it is 10 o'clock almost so let me take a zip of my tea today all right so this looks beautiful right of course this is not a design tutorial here i recommend having a look at angular material if you want me to show you something with angular material maybe make this a bit more pretty or prettier then then i can i can do this of course and just write it down in the comments below and then i'm happy to create another tutorial but i think for now this works so we've got the name the first name the last name and the place and for now we are actually already done with the first part of the client application of the angular client application and now to connect this with the web api we have to build our web api so let's run visual studio there it is my good friend so let's create a new project this shall be an asp.net core web api see that tested it before angular and visual studio 2022. i'm not the biggest fan even visual studio code is nowadays not always the best editor for this many people use webstorm i guess by jetbrains not sponsored by the way but this maybe is a great editor as well but i am using visual studio code just so you know i'm using still still using visual studio code for for all the javascript and typescript stuff actually but for my beloved blazer and net stuff i use visual studio 2022 all right so enough about that let's create our api in super superhero ng and this shall be called superhero api or something like that all right dotnet six it is configured for https we use controllers and yes let's enable open api support so that we still get swagger to test this as well so let's create this there we are close this one and the first thing here as well is the superhero class let's just create it right here at root level we add a new item could have also selected class but either way this works super [Music] hero and again we've got an id which is nullable actually but this works as well we've got a name which is an empty string and now let's copy this first name last name and the place first name last name and the place all right so this is now our superhero class and now similar to the ui application first let's return a mock hero so in our controllers folder we create a new controller and this shall be an empty api controller here not an npc controller not an api controller with read write actions or using entity framework we will add entity framework manually in a couple of minutes but for now just an empty api controller click add and we call this super hero controller isn't this a great name all right and here now already we create our first method again we are returning a mock character later we will use a data context with entity framework and sql server express so then we will need a constructor but for now this should work so this will be a get method public async task i want to return an action result with a list of super heroes one more bracket yep and we call this get get super heroes alright and this returns a new list of superheroes where we add a new superhero and here now we can already give this thing a name and so on but let me format this a little bit yeah almost i guess okay now the name [Music] again spider-man then we've got the first name which is peter the last name which is parka and the place is new york city all right that's it i guess let's run this and then we can test this first with swagger ui there it is superhero try this out hit execute and there is spider-man with id no zero yeah why not okay and now we have to combine these two and you can actually see here this is the url we have to use in angular so let's use this thing and for that i go back to visual studio codes and here now first in the environments environment ts we had the api url api url base api url actually and let me put this here again so we've got https okay 7020 is the port by the way if you want to know where the part is we have a look at the properties and then launch settings json file and then you see it profiles super hero api and then here you see the https url and the http url and one more thing on my machine it's configured but if you see a warning about the certificates actually because we're using https right and we don't actually have a certificate that works here with chrome for instance you can activate a developer certificate but visual studio should ask you to do that so i hope it does and then you get no warning anymore that this is an not secure you know what i mean the not secure website or anything application maybe um yeah this just as a side note we covered that by the way in the blazer ecommerce course so if you want to have a look there then this might be interesting for you but i can also i don't have it in my mind just just ask in the comments and then i will i will tell you how to do this all right this is the url did i copy yeah i copied that nice and now in our superhero service i also want to add the url let's just call this url and this is now actually superhero this is the controller name and now to make this possible we need the http client module for that we go to the app module ts and down here we add http client module and we also have to manually import this so let's copy that and that's and then we've got http client module but this is in angular common and then http okay so with that we've got our http client module to be able to make web service calls in essence and now we have to inject this here so private h let's call this http http client it is and now you see it here this is the model this is imported the module and we also see the import up here nice okay and now with our url let's make this private we can actually remove this and actually also remove this here and now we return an observable of type superhero or with the superhero array all right and in here now you just write down http get this is a http get request method right so we want to get an area of superheroes and regarding the url looks like that string interpolation dollar sign and the curly braces and then environments this one not the prod one this one here and then we get our api url forward slash after the curly brace that's why i did not add it here in the api url or here because i want to see it here so sometimes you know you forget the the forward slash in your variables maybe so it's for me it's better to shoot like that and then finally the current url here in our service and i think that's it okay so this is that we also have to import the observable of course and now back to our app component and in here now what you want to do is we call this superhero service get superheroes subscribe with the parenthesis of course subscribe okay that's the first thing we have to do and now we get a result here so this result is a superhero array can we can we just format this a little bit nope doesn't want to accept my shortcut here but this should also work and now here we say this heroes is our results all right let's save this and go back to our application which does not work okay now let's have a quick oh yeah of course it does not work you see it here in the network tab as well let's just reload we have a course issue here a course error that is in essence saying hey the uh the the source or the the website that is trying to call the the superhero controller here has not the same domain the same url as uh well the the one from the actual controller so the client application is running on localhost 4200 the api is running on localhost 7020 and this does not work this is a security issue here but of course we can fix that real quick so back to our api to the program cs and here we have to configure course just for our development application here our development state in essence now here we write builder services add course there it is and this gets some options of course so options options and then we add a policy we can give this policy a name like the super hero origins because this is actually what we want to add here and now regarding this policy um we want to add the origins and the methods and the header so policy almost policy with origins and now we just allow the localhost 4200 so http local host 4200 and then we allow also any method and also any header all right hope this works now yeah forgot one parenthesis here but here you can see it ensures that the policy allows any method and also any header and now we also have to use this and we can do that down here app use another user use course and then there's important the name here of our policy all right so let's save this hope it's rebuilding that's it is is it this is restarting not sure about that yeah it was i guess but let's just restart it again just to be sure now again quick recap builder services add course adds cross-origin resource sharing services to the specified eye service collection all right so with that thing we can accept certain origins like our client application origin here let's get some options and in these options we add a policy give this thing a name and then with this policy we can add the actual origins we want to accept here it can be more of course so we can just i think just with the comma separate them add another one and then we also say okay we want to allow any http request method and also any header and then this should work and i would say we just reload our application here and you see this works now isn't that great and also here in the network tab this is the old one see it here i activated preserve lock and this is the new one now we get peter parker as spider-man living in new york city from our web api isn't that great okay so that's nice we've got the first part of our client we've got the first part of our web api but let's get rid of our mock characters or mock heroes or mock entities in essence and add entity framework core i'd say right so the first thing really i want to do is or i i recommend here is also using sql server express to get it just google for sql server express and now here i just did it on my other screen you see sql server downloads and then you see express this is a free version this wasn't the developer version but i'm using the express version click download now and then the download should start there it is but i already have it and after that you can also actually google for the sql server management studio that's the one i like it to manage my databases in essence but of course you don't have to do it right you can also do this with visual studio code or with visual studio 2022 and any other tool in essence but i like the management studio here so that's why i do this and i will also use it here in this tutorial now let me start this thing real quick and there it is so that you can see how it looks and how we will use it there it is already we've got our databases of course the superhero database is not here yet this one is a database of my other course the dot and jumpsuit course if you want to have a look feel free to do this thank you very much but now when you've got your sql server installed we can finally start with entity framework and the first thing we do here is actually creating a data context so for that we create a new folder call this data and now here we create a new class call this data context and this is then the context that will enable us to access our superheroes here we are inheriting from db contexts and with control period we get something like that in this quick fix menu here we see the suggestion to install this package microsoft entity framework and this is exactly what we need if you do not see this then please go to the new git package manager and install microsoft entity framer core but we will do this anyways in a second just hit return and finance the latest version because we also need two more packages to be able to use code first migrations yes you want to rebuild and also we need the provider for sql server all right so this is the microsoft entity framework core package but now again let's also add this one here entry from a core design shared design time time components for entity framework tools install this okay accept and then also sql server that's the one microsoft entity framework core sql server microsoft sql server database provider for entity framework core so install this and after that we also need the data the entity framework tools and then we're done all right with all the installations but now let's have a look at the data context all right so first we add a constructor here so that we are done with our data context and then we install the tools start the migrations and then we've got our database and this is actually all the kinda all the then really the boilerplate codes to get everything up and running and then we can implement all the other card implementations and operations we can implement all the other card operations jesus it's it's getting getting late late and later almost half past 10. all right so public data context and then db context options with our data context these are the options and we use the base constructor here as well with the same options so this is what we need here and then very important if you want to see an entity in your database as a table you have to add it here as a property so this then shall be a database set right database set is the correct type here of superhero we call this super heroes this is the name of the table and usually you just pluralize the name of the entity now we get a little warning here all right but we can get rid of this thing by saying this is already a set of type super hero all right so we've got the data context covered i told you that we have to install the entity frame record tools but one more thing i want to do first is adding a connection string because that's what we also need so that data so that entity framework knows how to connect to our database and what database to use right so this is done in the app settings json you can do it here you don't have to you can do it here you can also do it in the data context itself but let's do it here it's a good way good practice i'd say so connection strings is the first thing we want to add here a new section called connection strings and then we call this a default connection and now this can of course be different in your case but if you are using um a sql server on the same machine you're developing right now so it is installed locally like in my case then just do it like that it's called server this is the first part of the connection string localhost backslash backslash and then sql express then the database name i just call it superherodb and then the last thing trusted connection let me close this real quick connection is true all right so server localhost backslash backslash sql express database is superhero db and then trust connection is true this is the connection string and now as i said the last thing are the tools so first let's go to our superhero api folder and here we see everything we need i did this because we have to be in this folder for the migration and actually we also have to stop the application so just close this little window here and then the application is stopped and now here we type dotnet tool install dash dash global and then dot net dash ef and as you can see it is already installed in my case so what i can do is i can just uninstall it and install it again i think there's also the update command but this works as well dot net tool install and now i've got version 6.0.6 let's double check dotnet ef there it is this is energy from a core the net command line tools of energy from a core and here you also see the available commands database db context and migrations and we only need migrations and database so let's use these i would say what we can do now is we can add our first migration with net ef migrations add and then let's call this initial for our very first migration it is building and i hope this is actually not true superhero api doesn't reference microsoft any framework design let's have a quick look here [Music] actually here oh it's not saved why not let's try that again okay this is also interesting let's see of course shoot i forgot something so back to the solution explorer and now in the program cs one more step and then we're actually done with the complete boilerplate code we have to add this db context here of course so here now with builder services and then add db context of type data context and let's add this here now we also had some options and here we make the connection between the database and the entity framework in essence because here we tell an entity framework to use the sql server and also use the default connection connection string so yeah of course as i said it is late so sorry about that so options use sql server and here now we need entry firmware core again and then with builder configuration we can get the connection string this is just shorthand for you see it here get section connection strings and then name and here we say default connection and now i hope this works dot net ef migrations at initial nice okay so this worked now and now we should see yeah our migrations folder with the initial migration and this just creates the table superheroes with the id as the primary key the name the first name last name and the place great and in case we want to remove this migration or roll it back then it just drops the table and now we can say dotnet ef database updates and with update it also creates the database if it does not exist there you see all the commands great table superheroes and so on and now let's get back to management studio we refresh go to the databases and there it is tables superheroes and now we have no superhero here that's so sad but we can change that of course but first let's fix our controller real quick with here with using the the context now right the data context and entity framework core as i said we need a constructor here so this is now ctor and we inject the context data context context we use yeah api data and we initialize this field and add the underscore here yes i know i can configure this with visual studio but i didn't because and you can see it here already there's the next update and with all the updates it is removed the configuration for how to write this or how to generate the code for private read-only variable here if you know how to well secure this configuration so with an update it's not gone please tell me that in the comments and then i'd love to do this all right so now with get superheroes what we have to do is we do not return our mock superhero list here now we just say return ok for the status code to 100 and then await context superheroes that's how we access all our heroes and then simply to list async all right and we of course use entry firmware core here again save this save everything and start the app and now we should not get any hero at all in our application but let's see if this is really true so here's swagger ui try this out it executes no hero here nice and where's angular here it is refresh no hero but now let's go to management studio we add again spider-man peter parker new york city and now back to the clients refresh and there is spider-man nice so this works and now we can actually implement all the other methods right so maybe we can start with the controller and let me implement all our other crud operations meaning create a hero updater hero and the leader hero because this is pretty simple and then when we got our api we built the form and all the other stuff to or in the client and uh yeah so we can focus now on the api and then on the client i think this is a good way if you don't want to see the api implementations just skip the the chapters here and then maybe you already have your api and you just want to use angular to build a simple form for the very first time for instance and i think this is also a good way regarding this tutorial okay so first create a hero do this with post again public async and so on and yes what i want to do is again return a list of superheroes because after let me rename this create superhero because um after every action here i just want to return the complete lists and then we can use this list to refresh the table then all right so we need a super hero here another thing we could have used here is the dto data transfer object right but let's just use the entity here i think for this quick and dirty well it's not that quick but still for this quick and dirty way in essence this i think that's okay bear with me here please i think you know why i'm doing this that way so how to do this here with entity thermal core we say context superheroes add and then the hero and if you would use a dto here you would first have to map the properties to the actual entity and then you can add the hero and here now we just say save changes async we do this because we well changed something in the database we wanted to add the hero with that entity framework only knows okay this guy's wants to add this hero but he didn't yet and with save changes then antique framework knows okay this guy really wants to add the zero and writes these changes store it in the database and after that we return the complete list of superheroes and yes i could have returned or refactored this but i think this is okay so this is our post method now we can create a hero now the update method is the most complicated one in this particular case because we yeah in essence we we update every single property manually but this also works so update superhero hero i love intellisense it's so great with dotnet6 and c-sharp 10 and visual studio 2022 with intellicode sometimes you just hit tab five times and your code is written i don't know if it's really that good that you don't have to type your code really what do you think about intellicode please tell me that in the comments would really be interesting are you using intellicodes often in essence i don't know so the very first thing i want to do here now is i want to check if the hero is actually available so we create our db hero for the database hero so is the hero in the database that we want to update and for that we try to get the hero with the certain id here so find async and there it was already isn't that nice so hero id this is correct as i said intellicode crazy and if the hero is now we just return a bad request with hero not found and then if we found our hero then we say yep the first name is the hero first name the last name is the given hero last name and the place finally is the hero place after that again we have to save our changes okay and then again we return okay and then the complete list awaits context super heroes to list async it is all right so this is our update again we try to find the hero with a given id from this object here and then we just overwrite every property all right of course there are different ways to do this if you just want to overwrite one certain property then this would not work of course so here we override everything i know it is not the best way but again for this tutorial you just want to know how to build an api and connect it with angular so i think this works and the last one now delete for that we use the delete http request method and we also add a route and we can do that with these parentheses here another way to add a route is actually the same as on top of this controller here so route and then in parenthesis the actual thing you want so then here in quotation marks right but we can combine these so comma not comma parenthesis open and then we only need one parameter and this is the hero id here or just id and then again we have a public async method returning again the complete list to the superhero with the id this works and again i can actually copy this we check if we got the proper id here or the proper yeah the proper id because we want to check if there is a hero with this id if not again we return a bad request and otherwise we say context superheroes remove db hero and again we save all the changes and again return all our heroes okay so this is the complete api don't worry i will also put this to push this to github so you get all the code off the client and the backend here on github but first let me test this with swagger ui so we have our get method to get all our heroes right this is spider-man great now let's add one try this out and we keep it like that string string string string this is nice we hit execute and the id now is two great and this hero is called string first name is string last name auto string and he's living in string nice okay now let's try to update update this guy make sure to change the id to two and now this name is string one or maybe integer this would be funny okay string one there here she is and now let's delete the zero with id2 we hit execute and we only get spider-man back and also in our get method there it is it executes this works okay with that we are done with the api i hope and now we can focus on angular so back to visual studio code there we are all right and now the next thing i want to do here is create another component so with ctrl and c we stopped the application and now we have our list here in the app component and now let's go to our components folder and create an edit hero component so this will be a really simple form where we can then create a new hero edit a hero and also delete one so with ng g c this time so generate component and then edit hero and also skip the tests we create this beautiful new component all right and there it is and let's have a look let's close this edit hero works nice and now the very first thing i want to do here is add an input because with this input we will well input the hero with its data to this edit hero component and alter the form then we can display all the properties of this hero so first add inputs and then the name hero which can be no actually and this is a super hero like that and of course we add another import yeah okay and then in a couple of minutes we will also add the the crowd operations here or the calls to the um to the superhero service for updating a hero creating one and deleting one but first let's move to the html where we create our form all right so now we start with a little diff close this div and now when we actually have a hero all right then we display first the name and yes by the way if you know this there is a tutorial in the angular documentations this is kind of similar here the tour of heroes tutorial with the hero editor so if you want to have a deeper look maybe this is a good address here for you you see it here as well this is yeah i stole this i saw this one here okay the h2 the header but then changed a little bit and uh actually already did the superhero tutorials for the dotnet web api and without the angular tutorial but what a coincidence well people like superheroes i guess so this works for a couple of people and this is really really nice so again back to the code we've got our header here and what i want to do is simply display the hero name so that's that and then now let's just add a diff for the name and an input and this is no interesting because we will use two-way binding here with for for the ng model so this just means for the event and for the value both is bound here so with ng ngmodel and then hero name we can actually say whatever the user is entering here this will be stored in the actual variable or the actual objects and let's just set it as added placeholder here as well this is the name all right why is it not working like that because we cannot bind to ng model it's not known and to be able to use it we have to add our forms module here so below the http client module we add our forms module now it's imported and we go back and now the error is gone isn't that nice all right so now let's just copy this for the first name the last name and the place first name first name first name placeholder doesn't really make sense here but anyways let's just use it last name and place shall be the last thing [Music] and also here is that oh quotation marks missing all right so that's the or these are the inputs and now we need also some buttons so what i want to do is again um enable the user to update a hero to create a hero and also delete a hero so there are actually three buttons we can add here so button it is and the first one on the click event we will call a method that is not there yet of course update hero with this hero here and this shall only be just the only be displayed if we have a hero id alright remember lowercase i and when we go back to our hero model this thing is nullable and if you do not have an id this just means that we want to create a new hero here so this button will not be displayed called the safe and then copy this because i also want to add a delete method here so delete hero and call this delete and now for creating so create hero we will just check if we have a hero id alright so this is now our complete form and to to fix these errors let's just add the methods real quick so we've got update hero with a hero all right and then also delete and create delete hero and create hero okay so these are the ones error is gone and now let's add this form to our app component so we've got our table here first thing on top uh that we can use is actually a button to create a new hero or initialize a new hero so with a button and then click and in this case init new hero we create a new hero and now to edit a hero we actually need another button here so let's add another column with a button and here now on click i want to call another method called edit hero with the current hero let's just use edit here this should work and now down here again we add the other components so with app edit hero we set the hero to the current hero we want to edit so let's call this then hero to edit and of course we add this guy in our app component ts so up here now hero 2 edit is a super hero and then again when you have a look we've got our edit hero method and the init hero method so back to the component ts we say init new hero simply says that this hero to edit is a new superhero and edit hero superhero just says that this hero to edit is this hero all right let's save this and let's just have a quick look restart is it running actually i'm not sure but no it's not running so ng serve it is all right there it is let's open the console and now let's just look we want to edit spider-man there's our form with spider-man name first name and so on and we can save and delete of course there is no call done for now and we can also say create a new hero and this guy then is actually uh has no no name and so on okay and i think iron man is written like that right all right okay so this works so far this is nice and it looks really nice and and now what would be the next step well we have to make some cards right so when we close this we see we can initialize this we can edit the hero that's nice but this is just working locally and you can also by the way see the um two-way binding here right so i wrote iron man and we already see the um the the name here as well in the in the header and this was actually when angularjs came out and i saw this for the very first time this was just mind blown right because before you really had to use well maybe jake fury or vanilla js to to update this by by yourself and with angularjs and knockout js actually a bit earlier um and then these these bindings was just a great moment to see this and now with angular and react and all the other stuff and of course blazer which i'm a big big fan of well this is this is just standard nowadays but still it's great it's great how web development gets better and better okay so uh long story short let's let's add the final touches here we've got our app component ts we've got our edit hero component here now we have to write these methods and what do we want to do here actually we just want to call our service and make the web service calls so let me first add the other methods so maybe first the update hero again always returning an an array of superheroes actually so we can refresh our table but now we use put for the update and the url is the same but we add an object here so this one is missing hero superhero and here we just add our hero so this is our update method right now let's copy this and i use create hero again or also we need a hero here but the method now is post and the rest is exactly the same and now for deleting we just use delete superhero for instance delete and we still need a hero here but we are using the id here of this object so delete superhero with the hero object and here now no no object in the in this call but the id in the complete url then all right and that's it this is the the service and now we use our edit hero component to call the service and what i then want to do is i want to refresh the table i already told you that but to be able to do this we need an output parameter so that an event is emitted raised whatever and then the parent component our app component then knows okay something has been changed so let's refresh our table so first the output component component parameter output heroes updated new event emitter of type super hero array alright so this is what will happen what we want to use here and now first we need our service so the private superhero service of type superhero service and now here we say this superhero service update hero with the given hero [Music] subscribe and then our heroes and here we say this heroes updated emit with our heroes and we can of course add the type here this is a superhero array nice all right and now for the other methods create create hero and delete delete super hero can we rename this delete hero all right nice um okay this should be it actually let me just double check got our constructor it's injected you got the output parameter um [Music] update hero delete hero create hero yeah looks looks okay i guess and now back to our app component first the ts we need another method here now for the event so let's call this update hero list we get the updated heroes and then we say this heroes is the given hero list almost all right and now in the html we write heroes updated update hero list with the event all right this should be it let's see is it re did it actually rebuilt i think so can say edit and this is now amazing spider-man safe yeah well we don't see anything here but it is safe this is nice now let's create another one again iron man first name is tony last name is stark places malibu the create button is missing here nice um no not here here actually oh it's just called uh let's just call delete not great okay let's do this again now it's called create nice okay um iron man tony stark living in malibu create yes that's it now we've got iron man as well let's have a look here at the network tab this is the the post call with our pay load and the preview id3 because we had the string one hero before nice and yeah now we can also delete this guy it's gone and we get all our heroes back maybe we can um created again you know this you you can you can double check you can check this by yourself just wanted to to show you the hero as well here in the database but here you see the change with spider-man so this is now amazing spider-man this worked and well that's just because it's so much fun of course i have to add this guy okay let's create it there is bruce wayne and we can also execute the sql command and we see batman here nice all right almost one and a half hour but maybe it's only almost one and a half hour and then you you have your web api with the well basic crowd operations and also an angular client application with also pretty basic collaborations and a pretty basic form but still this works and now you can make it better alright so check out the codes the link for the github repository is in the video description below and please feedback i'd love to see any comments and if you want to see more net of course but also maybe angular maybe react react the same tutorial with react would be interesting i guess so that would be something for another another tutorial and apart from that that's it for this tutorial now there you have it isn't that a great design for a user interface right still with that you get the angular client angular 14 client and a.net 6 web api on the other side on the back end and also a database the sql server database and access data with and modify the data with entity framework core six isn't that great so this is the full stack it's a simple application of course but i think this is a great start if you want to do more with angular 8.6 it's a great stack in my opinion does work pretty nice and we do that at work all the time if you liked this and learned something thank you so much for liking and subscribing and also don't forget to hit the bell icon to get a notification as soon as i upload a new video currently every tuesday that's the date for a new video and this works pretty nice so again thanks for that also again the newsletter maybe this is interesting for you if you want to get these videos earlier in your inbox and also other stuff like early access to the upcoming online courses like the.net web developer bootcamp then consider subscribing to my newsletter thanks again and last not least again thank you so much for the tea or the coffee or the water it's also very important drink water people it's good to be hydrated so thank you very much for all your support and now this shall be it's for this tutorial but if you want to see more check out these videos here on the side would really appreciate it if you stay a little let's have a chat and watch more videos thanks so much for watching thank you so much for the time and i hope i see you next time take care

Channel: Patrick God

Views: 151,475

Keywords:

Id: dtthbiP3SE0

Length: 74min 49sec (4489 seconds)

Published: Tue Jun 21 2022