Angular 12 CRUD with Web API Tutorial Part #1 | Angular Material 12 CRUD Step By Step

hi friends welcome back to arc tutorials in today's episode we are going to learn crud operation in angular 12. in this tutorial i am going to walk you through scratch step by step how you can achieve current operation in your angular applications this is one of the most common use cases that you would work on any angular application so let's get started i'll keep it very simple before i get started let me request you to please check out my angular 10 complete tutorial playlist that's in the description box below make sure you go through it because i've covered all the topics in detail with lot of use cases which will really help you in your applications all right so what are we going to do today we are going to learn how to install angular application install angular material and we will also learn how to do crud functionality end to end from scratch step by step without wasting any time let's get started straight into it alrighty so all i have here is an empty project directory i don't have anything here so we will do everything from scratch so i'm going to first do npm install angular cli that is what is required for us to work with angular that's the very basic first step that you will need so first we'll install angular cli and the command that i ran is npm install at the rate angular slash cli while it is happening we will be using angular material in our application right so this is one of the most commonly used framework all my other tutorials in this particular channel include with bootstrap so you can either use bootstrap or you can use angular material so we'll be using angular material in this particular thing so the next step that we will do is first create an angular application so create new angular app and for that the command we will run is ng new and name of the project so the name of the project can be anything that you would want in my case i'm going to build let's say crud operation for admin user right so i'm going to call it admin so ng new admin this will create the application but before that it would prompt us few options like would you like to add routing yes please which style sheet we want to use i'm going to go with scss so that we can add mix in we can add different styles which are much easily extendable all right so while it is creating like i said we can use either bootstrap framework or angular material or foundation or tail wind whichever you prefer in this crud series we'll be using angular material design angular material design is pretty cool uh it supports a lot of tools that we need a lot of components that we will need okay so that's what we'll do let's give it a quick minute um while it is doing its job in the meanwhile if you're new here please do subscribe to my channel also do check out the other series that i have on angular express node mongodb etc as always i look forward to your feedback support in this channel and thank you in advance for that all right so let's it's taking a little while and i don't do editing work so that's why sometimes it takes work uh some some extra minutes so please bear with me all i do is live coding for you guys so that you learn how to do end to end in a mean while let me show you this is an angular website that you should be referring to that we will also use in this particular tutorial and this is the angular material url that will be using a lot of components from here as well okay so make sure that you get through it so this is your best friend i would say that whenever you are in doubt how to use some component please refer to this documentation it will be really helpful so this is a command ng ad angular material that we will have to run so now our application is created admin now let's just paste our command which is ng add at the rate angular slash material so this needs to be in the definition all right so we need to go to admin and again run it so now it will add uh it will search for the package and it will add it so it will also provide us some options like would you like to proceed yes we would like to go with 12.1.1 and then it would ask us to choose a theme so let's give that a quick 30 second time and the best way to do is uh code along with me follow along so that way it would be much easy so you can see there will be different options here so i'm going to go with indigo pink theme would you like to set up the global typography yes please would you like to set up browser animations yes we'll need that also so you need browser animations typography so that you work well with angular material design right it would have a standard theme so it would update your index.um angular.json index.html and style.css all good so now what we did we ng add at the red angular slash material okay so we have installed an angular application we created new app by the name admin you can see here admin app we also installed angular material now all good now run the app okay just to make sure that it's all good and it's all up and running so you'll write ng so since we'll be using angular material components it would be lot faster going forward in terms of putting together the ui so don't worry too much we'll try and complete it in one shot as much as we can the first time when you compile it may take like extra 30 second time but going forward it should be pretty fast because of the hot reloading feature that angular provides all right so our application is compiled successfully now go to the url and type localhost and you should see the up angular application up and running okay so once you have this then the next thing we'll do is go to source app go to app component and i'm going to delete all of it except for the router outlet so delete everything but the last line which is router outlet so now when you see you don't have anything on your screen all right perfect this is what we wanted so now our angular application is up and running we got the angular material components installed the next thing we are going to do is we are going to use the toolbar that will give us a two column layout so we are going to use a component called matte drawer all right so the best thing is go to components you will see here you can see the side nav right so you can see lot of examples that are provided here that you might want to explore so i'm going to go with the basic drawer component so i'm going to go to code and just take this as it is and i'm going to go to app component paste it here move the router outlet to the component so now i'm saying any output should come to router outlet the moment you do this you will get errors here why because we have not imported the required modules so what is the required module the api so copy this import module and go to your app module import it here so remember whenever you want to work with any angular material module you need to first import it all right so import the match side nav module now again it will compile and now it should be all good so you see here it's compiled successfully and all good so far so now let's add some content to it so we'll know that it's working fine so i'm going to say welcome to my app let's see so let's see we can see here that it is showing so to get the exact styles what we are going to do is go back again to basic drawer go copy the css code and put it in scss file and now you should see it should occupy 100 percent right so that's how it is occupying with these 100 400 pixel here i'm going to make it hundred percent and i'm going to make it 100 so it's now full application you see here it's now full page all right so that is a classic example of how you can get the quickly uh the container which is the drawer to get the two column layout all right so i'm going to go a little bit more and copy this exactly so that we get the same styling so this is the 400 pixel 400 pixel or if you want you can take a fixed side nav view the code here take the code copy i'm going to go with a fixed site nav go to html and just copy this sidebar content you should be good on that all right and paste it so either you can use sidenav container for site nav or you can use a drawer functionality whichever you use is totally fine so it's up to us i don't want to spend too much time on design today because we have a lot of work in terms of crud functionality so i'm going to go with this and i'm going to say example container here and let's see how it looks so we have this um example container here so instead i'm going to make this as 90 okay so we got this thing and we got our application so it's it'll be good and now let's go back to our component and this is where we'll do our magic now so what we are going to do we are going to generate some components okay so let's go back and i'm going to say ng generate first module okay i'm going to generate a module i'm going to call it layout so generate common module i'm going to call it layout so we will say ng generate module by the name layout okay so we got that so source app we are going to go to admin we are going to cd source slash app and then we are going to go to layout and here i'm going to say ng generate component header i'm generating a component by the name header you can see here header now i'm going to generate ng generate i don't know if you guys can see it but let me type it here ng generate c component sidebar so this will be for the sidebar code now similarly ng generate component footer so i got three components these will act as my common layout modules right so generate common components ng generate component header same way copy this just writing all the commands so that you can refer it when you are working or coding along with me and footer okay so we got all the common modules now import next step is to import the common module that we created which is layout into app module otherwise it will not have a reference to it and remember the components needs to be exported as well so copy this array because you want we want them to use outside so we are going to write exports and paste that array so i'm exporting all the components here now let's go back to our app module here and import the layout module got it and then comma all good now i'm going to put a routing i'm going to my routing file and i'm going to create four routes for each of my operations which will be so here we'll be generating the uh routes for our crud operation so let's first see and modify our app component and here i'm going to add app header component right so now we have to use padding little bit we have used app component in the header we have header works so this example container i'm going to say padding hyphen top should be 60 pixel all right and we have to start our application ng serve you can you can open it in a new terminal and work parallelly but i sometimes prefer to use it because i want to be sure that i am what i'm coding i can review it before i run every time sometimes if your application is heavy this may take a hit all right so i can see here that i have the header works and i have the content body here all right so we got the header in place now similarly let's quickly put our app footer here and this is the sidebar code so this is where i'm going to add my app sidebar okay so you see here sidebar works header works and finally footer works right so let's jazz it up quickly so i'm going to use toolbar for my header let's go here and take toolbar code i'm going to keep it simple so i'm going to just take a basic one let's say this right my toolbar code and go to my header component paste it in the header again this will give us error because we have to import the mac toolbar from the ap so the api is import mac toolbar go and you can import it in only in the layout if that's what we prefer that's fine now mac toolbar i'm importing and adding it to the layout module now it should be good fail to compile okay so now when you see something like this all you have to do is just restart give it a time to compile we have a lot of work we have not even started the current operation we are just setting it up um so please have patience when you work with angular that's the most common thing that's required when working with angular application okay so there is some error let's see what it is it says header component matte icon okay so we see the error is because we have not imported mat icon module so let's import that also and the best part always is that angular will tell you the errors so follow the errors and we should be able to resolve anything that we come across so we got the mat icon module and let's see the status of our compiler so now it's compiled successfully we should see our header okay so similarly let's take some styling also from the example from the toolbar you'll see that i'm navigating quite a lot in the documentation because you don't have to look anywhere outside okay the all the code all the examples will serve you as the first starting point so make sure that you try to learn from the documentation itself so i'm copying the css so now we should see the icons here so you see we got our header right so we got our sidebar so why don't we give some spacing to our sidebar and say give it um here i'm in the app component let me style it up for you i'm going to close this here so you can see the code more all right um so here in my app component so i'm going to give app sidebar um i'm going to call this class equal to sidebar and i'm going to style it here and say sidebar and say max width should be 250 pixel all right so there we are so we got this sidebar we got class equal to sidebar which is our matte drawer and we are saying the max is the max is 250 pixels let's just see by increasing it to make it 500 pixel and refresh so that's looks like it's not reflecting so i'm going to go ahead and put it to app sidebar okay looks like something is getting overridden let me try this one more time here and instead i'm going to use an id and this is the sidebar here and in the sidebar code here we are going to give id is equal to sidebar and we'll move the content of the sidebar inside so we got the header footer and the sidebar working when you don't see something again just restart the application and move the styling okay just one quick second all right let it build and once it's ready we should see our application so this is a basic layout that we can work with we have got the sidebar and we have got the all right so we got the sidebar let's not worry about it now so let's go ahead and work on the list item okay so let's first put a routing files so i'm going to generate some components because we are going to work with a module for crud operations so i'm going to generate a module and i'm going to call it users ng generate module users we can see here that it would generate so it created it now okay so it created inside this layout we don't want it there so i'm going to move up to app and going to delete this here and instead i'm going to generate this module right here at the app level okay so we got the users so now let's go into users and now i'm going to say ng generate component view all or i'm going to call list users so this will list all the users that is a read operation and similarly i'm going to say view user this will be a particular user that we want to view all right and then i'm going to say add user and then we are going to say edit user and then i am going to say delete user okay so that is basically your crud operations which is crud create read update and delete so let's add path now before we do that let's import the users module into our app module okay so now we have it here the users module is imported i'm going to go to routes and add routes for my user so i'm going to say path is whenever there is create it the component that it should go to is add user component whenever i say path now view slash colon id it should go to component view user component whenever i'll say path as list it should go to component list users component whenever i will say path delete slash colon id it should be it should be going to delete delete user it's not auto completing let's see why component delete user component whenever there is path as edit slash id we will say component edit user component so see create read update delete we created all the list right so now let's take this path add it to our layout which is in the sidebar so that way we will have a list so for that i'm going to use one more component and that's to just to make it beautification this one right you see here we can use this so this will be much better looking ui so what i'm going to do i'm going to copy this mat list role copy it into your sidebar okay and this will give error because we need to import the mat list module let's import that into our layout module okay then copy the mat list module paste it here so now when we go and start our application let's just check one more time matlist item we got matlist excellent now let's start the server all right all right so just a note in case if we are running out of time for this particular thing which is already 22 minutes now um i'll continue this in the next uh episode as well so stay tuned for that uh the idea is to try and achieve as much as in one go for you guys so you have a continuity in your learning so let's keep working as much as we can at least for an hour or so and see how much we can make progress all right so in the meanwhile while it is compiling i'm going to go to footer and just add some footer thing that you would want to add like say copyright and say our tutorials etc okay and it's generating sometimes it it will take time because once you are compiling with new modules it may take a while but it should be done so we got here item one two three from the sidebar that we added just now here so now i'm going to make it a link and make it and give the same path as the one that we gave it for routing so i'll say add user copy this and go here and say um yeah so that's basically it right so add user or we can say list users so this will be list that's what we'll be having too the remaining navigation will do it from the from the app user module so when i click on create you see add user works comes here when i click list user it says list users works right so the routing navigation is sorted we have we are able to link that in our application so the next step that the next logical step we need to do okay let me let me just make it a little bit better so we know right so i'm making it hundred percent now see i removed that margin so that way there was two scrolls um so now we have the hundred percent view here we have the add users we have the list users right all right so now i'm going to app component and this is the mat drawer where the data is coming let's go to users and first let's go to list users so we know that since we are working with users and we are going to do crud operation what i am going to do is in the app folder i am going to create a new folder and say m k d i r services so what i am doing is i am creating a new folder by the name services and we will need a services whenever we work with so i'm going to say ng generate service service name is user right so this is the one that we will have all the things that we need to work with the service files okay so now that we have created a service we obviously need to import the http client module that's what will be used for all the http calls so i'm going to say import and the shortcut that i use is always try and import it directly here and say http client module right so the import happens automatically in vs code here you see so we have imported http client module that means i can now work with http client declined from angular common http in the constructor will inject the instance and say http is an instance of http client all right beautiful so far we imported the http client module we imported the http client so now we are good to make some calls with our api okay before that let's write some methods so i'm going to say list users will get me all the list of all the data that we want to work with so we'll so let's have a url right and i'm going to say const base base url is of type string is equal to http jsonplaceholder so we will have to get the json.jsonplaceholder.cypress.com io so this is the one we will use to get the mock apis okay so think that this is your api endpoint that is going to return you um so class member cannot oh sorry my bad i'm always confused with okay so we got the um url this is the mock base url that we'll be using so for listing users what we'll be doing is we will say this dot http dot get so here i'm saying get get means get the data from this particular api so we will be using base url plus so we need users right so we need all the users so if you see go to this dummy thing and you copy this url and paste it here and make it users so you'll get a list of users dummy users data so you can use this endpoint so i'm going to make http this dot get and i'm going to say return okay so what i'm saying i'm saying return whenever list users is called call this api endpoint and return the data okay so now let's go to our users list users go to component now import that service here so in the constructor again inject user service is of user service so see user service is imported now i'm going to say on ngon in it what we need is we will call let's say i'm going to use um list users is equal to array and here i'm going to say this dot user service dot list users so this will return me all the users right so i can just say this dot list users now see so this says observable object is missing okay because this will always return an observable so what we are going to do is return an observable of type any okay so now this will say list users has no initial value so here you can just initialize or you can just simply say that it is of type observable okay and we will then have to initialize the value because see now this is of type user see it is returning object so we are going to say object or i can say this is an array so now this will say list users has no initialization so just quickly just say list users is not for now okay and that should be resolved but we will give a user model to it like we'll create a user interface which we will export and use it it will modify that so for now let's go ahead with list users and go to our list users and just use a simple well li and we'll say ng4 is equal to let user of list users and let's print the user dot first name let's see if this is the data so you have name not first name so user dot name now i'll go to list users and we need to start the application all right so so the like i said um make sure that whenever you're making sure that if it's compiled it should be successfully compiled that's the main goal and it should be okay so if you follow the steps and process correctly there is no reason why it will not work out well it's pretty simple straightforward only thing is like i said patience is the key don't give up because it's pretty easy and straightforward things don't mess it up if you run into any issues do let me know i'm always here to help you and anything that you have doubts with all right uh let's give it a couple of seconds in the meanwhile let's try to format this and it will be done soon i hope you are following i hope i'm not too fast the entire reason being that i want to cover as much ground as possible in terms of covering and all the topics for you like routing installation using angular material components i'm trying to do my best so that you can learn as much as from me yeah if you like the video so far please do hit that like button please do hit the subscribe button please do consider buying me a coffee already let's give it some seconds again this depends upon system to system my system is little slow so it should be done soon okay so some error uh in the code you see here uh so it says template users is not assignable okay so what we need to do then is is returning a observable so we will have to subscribe and then i'm going to say data you can't then i'm going to say um just just put this here and instead of all of this assigning directly here i'm going to use it here and say data okay so now this will say that um object is missing on the following property object the object type is assignable to very few did you mean to use any okay so like i said um this also depends upon the type of data that we are dealing with usually these are open apis so you would have issues with it instead you can just initialize with array but this would give error because it is saying that type object is missing from the following type never okay object type is assignable instead use any okay so i'm going to use any for now if that helps okay so this data we are getting from mock api so we don't know exact structure but in usually we will create a user object and assign it now okay so now that we have compiled it successfully and you're printing it here let's reload so we are getting all the user details here okay so let's use a list to define right because it would look much better so i'm going to use mat list and here i'm going to put that going to delete so again little bit of reformatting just to make it look good so instead of a uli i am now going to use a list okay and here we are going to add the user dot name and again this will give you error because we have not yet imported matlist component so let's do that here but if you see yourself using something which may require you to use multiple times like in sidebar we have used the matlist module right so move it to app module if it's a common one move it to app module it's like this whichever is generic or we you will use them continuously in different modules please consider having them moved out so here you see i'm moving the mat list module from here okay or even better now one second so i have it in my mat list module or you might want to add it here for now i'm going to go ahead and import it here as well but we will work on moving it to into a common one so i'm going to put it in both so that i just get the work done for now so you see now this is a list that we have and it's printing correctly okay so this is the list uses right and let's format it little bit better so here i'm going to say class is equal to main content and here i'm going to say main content and i'm going to say margin from left side should be 50 pixel right so this is much better aligned right um or i can say for some reason the style is not reflecting but i will work on this later not now in the list users i'm going to put it and i'm going to put it here and take this div here and align them here and this is the code for main content all right so this is a this is my list users so i'm listing all the users that we can use we can use table data whatever so i'm using matlist to list all the users so now what i also want to add the action items to it right so we are going to use a router link is equal to so now what i'm going to do i'm going to pass the path i'm going to say edit comma now here i'm going to pass user dot id and let's put it here right and i'm going to say edit so see i'm going to provide a edit link now so you see here a href a router link so since i'm using router link in the list users i need to provide it with the router module all right so now you see the edit link is working but the the link data is not coming correct it's coming as an array so let's fix that so here you have a router link let's quickly check the documentation for router link you don't have to remember everything because like i said you will be most of the time you will be working and looking at the code in a sense that following the documentation is one of the first and most important piece of advice that i can tell you so let's quickly check the quick router navigation so getting angular understanding angular tutorials in the understanding angular or just search here router link so we got the router link from the api and let's go to documentation and see that okay so it has the path that we want to give and the params so i'm going to do data find here attribute and edit and user id let's see if the id is available so now you see it fixed that error here in the look here it says one two three edit like that so i'm going to go with the span and say class say user name and going to put it here and i'm going to end the span here so what i'm doing is i'm just trying to put some styling quickly so that we have we don't can see it better um min width i'm going to say 300 pixel so see now this is 300 pixel we got this data aligned and let's give some spacing to the links and copy the same and put that with now the path will be delete okay so you can edit or delete the user that is the crud operations we are talking about now um you can give a class to these and style them up as well and say action link okay and here i'm going to give class equal to action link and here i'm going to say action link and i'm going to say padding should be say 10 pixel so you see the gap between those things so now you have the users and now i'm going to say tote give a div and say total users displaying displaying so here you can also use something like this list users dot length right users so here here you can see you are showing displaying 10 and i'm going to make it h1 make it h1 so here it says displaying 10 users and these are the users and we have the edit option click on edit so here you see list edit one so that's not the route we have so what we are going to do we are going to now refactor the routing so see this is how in most applications you will find yourself because it will never be i would say um one time coding you know what i mean like you will have to continuously reinvent re factor your application make it look good so i'm moving all my list things inside as a child see so now i'm saying the parent is list it will go to list then list slash delete list slash edit list slash view okay view user so these are all inside the list okay or you can also have some other thing if you would wish but now i've put here like so see here i'm going to say slash list it's going to list users component and add and now when i say slash list it should go to list users component it is showing list now i'm saying list edit one it says edit one works back now delete delete user works with the id see the id i'm passing right here it is three here again so this is how you can map the ids under the list of the users right all right again this i'm showing you how to use a parent with a module okay alternatively what you can do is something like this you will always have some module name right like users and then you will say if it's path is this or if the path is list still it should go to component list users even if you enter empty that means user it should still go to list users right so now create also is under users so see now what i'm going to do i'm going to change my sidebar with the router updated links so here it should be user slash create and here it should be user slash list okay so now when i click it says user slash list user slash create right so that's how you can disable enable module based on user functionality when you click edit now we have to change this functionality and go to list and here we will give the route and say user slash edit user slash delete all right so that's it so now if you see edit list users now you got users list okay so you don't need that direct base path so what you're going to do is you're going to use a slash so when you use slash it would be from the root now see so when you say user slash edit slash 2 it will be 2. now look at the url for this it is slash user slash delete slash 5. so we have set up the application layout we are able to retrieve data using mock api we created provision for edit delete and add list users so now i'm going to add one more url link like this this is to get the data so if you want you can add one more option again this is totally design specific how you want it so here i'm saying view so you got view we got multiple ones let's see we don't need so many we don't need the first edit let me quickly take this out okay so we got the view we got the edit we got the delete and we are that's the basically crud operation this is reading all the data this you can read a specific data you can edit you can delete you can add a user right beautiful so if you want to click on view let me implement that quickly for you in this episode and then maybe we'll continue in the next episode because this is getting too lengthy so i'm going to say view user and here i'm going to pass an id which will be a string okay and then i'm going to say return the data from the url so now if you see the url for the json it would be user slash one so when you say user slash one it will provide you the data of this id so if you say five it will get you data of the fifth user okay so we are going to append user slash plus the users slash plus the id okay so now this will return the exec id of the the details of the user with the id that we will pass now let's call this in our application which is view user so again in the view user you will import the user service and here you'll see user service and on ngon in it you'll say this dot is this dot user service dot view user and what is the user id that we will get we will get it from the id from the url right so for that we will also need private router or we are going to say activated route activated route okay debate it out and save it and then we are going to say here const user id is equal to this dot activated route dot so you can see here all the options that we have right so we can get from params right adam start now subscribe so you can get the data that you want and this is where your data will change right so you can just add it here and say this sir id is equal to data dot id now we need to define user id so user id is of type string equal to empty for now and here we are going to get the id and we are going to pass the this dot user id user id okay and again it's in service so we need to subscribe whenever you subscribe you get the data you get the error message right so for now let's do a console log and data okay so this is where we are getting the data of the user id let's see that in action now inspect element go to sources go to console and okay so if it says error we'll say if equal to list users so that error should not be anymore we were seeing an error here so now it's no more all right so now i click on view so now you see here it is giving the data which is all the data of that particular user but if i want to see what is the data that i got from here just do a console log and you should see that data also okay so you see here one that is the value that we clicked of the path that we went to the one right so we are getting the user id correctly from the activated route and we are calling the api url and getting the data so let's have user details okay and i'm going to say this dot user details is equal to data okay and here i'm going to say div ng now i'll show you the error first and then the show you the correct way to do it so here let's just print the data so here i'm going to say user details dot name so it should give me the first name of the user so it is giving me the name but if you see it should give you error in console right because it says cannot read property name of undefined use when you see this message which means that it's trying to read the property even before it's initialized in the by angular so if you put this condition ng if user details then only and now you go to console you should not see that error right so that's a good practice always have the data check now similarly now i'm going to show you how to use some other thing to maybe make it little bit more beautiful so i'm going to use a matte card here right with matte card details right so let's go to some example and pick up i'm going to use a simple card for now to show you how it looks so we are going to use a matte card it will give error because we need to import the module first so i'm going to do that right now so here now i'm not going to hit the save button i'm going to save and i'll go to the api copy the api mat card module into the user's module matt card module okay and then it will tell no quick fixes okay let's make it available so now it's available it will recompile the application and see now you are seeing a matte card component right so let's style it little bit in view users and say class equal to user details and here you put user details and i'm going to say padding should be 20 pixel or sorry let's put margin right so we see the beautiful matte card now right so this is how uh user details so this looks so nice that i am tempted to use this in my list users also i know instead of matte list item we can use matte card that looks so nice right so let's do that so again like i said um this is totally up to us what design we want uh you'll keep learning about it as you progress in angular world um there's no one thing so you see now these are matte cards right so i'm going to put some styling here and put some main content list user name so i'm going to give a class here list users style it little bit so you see how easy it is to work with all of the angular components they are just simply amazing so you see this is the now angular cards now this is a card inside that we have a user name list users it has margin it has the class name user name and minimum width is 300 so let's put that so it looks nice right with the card now so we have view edit delete we can fix the click on view you'll see the details of the user all right so this is one matte card right so i'm going to use some of the other things that matt cart provides so we are going to use something called title matte card title right and use it here that's the title of the card and then we are also going to use mat card content that is where we'll add let's say um users details user details dot let's see what other details we can print let's say um name address right or say email for now okay all right so you see here that's the name we have given the mad card title and followed by the content which looks pretty neat and clean so similarly we can use this mad card title in our list users to make it better and i'm going to use it here in my cart title and i'm going to use the name here and then in the matte card content in the matte card content will put some other details like actions of edit delete as we'll put them as part of the matte card uh details so we are going to do this here and put email here and we are going to use matte card actions right and we will move our actions to inside this matte card actions all right so this is wrong here double quotes double quotes here double extra codes double extract codes looks good now should be good let's see failed to compile okay let's see what's the error okay so unexpected identifier let's close this okay and now again compile it it should be good so we got the matte card component we got mat card actions we got the title okay and in the viewer we are good so let's give it a minute to compile it should be good so see how beautiful it is getting becoming with each step so it just takes some time so see here now so we got the details we got um so i'm going to remove the 100 width so that way you don't have the problem it would be any baby hundred percent all the time so like this scrolling right so see now i'm displaying users with the card with these are the mac um action buttons that we have with the first name click on it you see the details of this and i'm going to say minimum height should be 500 pixel right because that way looks good right like this now list users now you have all of this data coming up together so far so good so this was all about the the listing users and view right so now we have to work on edit and delete and adding new one um it's already shooting up to one hour so i'm going to cover it in the next episode so stay tuned for that um there's a lot of work to be done but i'm sure you will learn how to do it pretty quickly all right thank you so much for joining i hope you are enjoying watching me code i hope you can learn from it as well and that's the beauty about it right so join me in the next um um episode where i'll continue working on this if you like my work please do consider buying me a coffee at buy me a coffee.com arc tutorials please don't forget to subscribe to my channel thank you so much see you in the next episode

Channel: ARC Tutorials

Views: 11,008

Rating: 4.9411764 out of 5

Keywords: angular 12 crud tutorial, angular 12 crud, angular 12 crud web api, angular crud, angular crud with web api, example tutorial angular crud operations, how to implement angular crud project, angular crud example, angular crud application, learn angular crud table, examples angular crud generator, how to angular crud application tutorial, angular crud tutorial, angular crud application tutorial, angular tutorial 2020, arc tutorial angular, angular 12 2021 tutorial

Id: l-ntYAm76yY

Length: 57min 20sec (3440 seconds)

Published: Thu Jul 08 2021