Add UI interface in Angular to connect to the nestjs backend

[Music] hi hope you are all doing well this video is part of a series to show what can be done within the monorail with angular in the front end and sgs in the back end in the previous video that i uploaded we started to query db and we use a vs code extension from that client for that so now we'll try to do the same thing by building our user interface with angular and if you haven't yet subscribed please don't forget to do so you will like the amazing content that i drop here so without further ado let's continue our journey with our to-do application so what i will first do is to go to the website of angular material so there are some schematics that we will use let's first start by adding the angular material schematic well i didn't install the angular package ng globally so i will need npx for that let's say yes yes again it will take few minutes for the packages to be installed so in the meantime we can continue to talk about some of the schematics that we also add we use [Music] the navigation schematic so that very quickly we can have this toolbar and the the menu on the side so i find uh this schematic to be very handy and that's schematic that i also find very useful in the dashboard schematic i'm not sure that i'm going to add it to this application but it's very handy when you start building an application but for now i think that we'll only use the navigation schematic i guess it is enough for what we are trying to do but later on if we think that we need other schematics we can add them all the packages are now installed now let's go and add our second schematic we talked about the navigation schematic so let's copy this command here but before let's cd into our front-end folder okay yeah i need to give a name to the component so let me just call it uh navigation okay there is an error so we need to specify on which module the component is going to be imported so let's add a dash dash module app so it will be imported in this epp module here so the navigation component is now generated what we now try to do is to remove all these codes that was generated that was this code was generated when we started application so now let's just call the navigation component that we just created if you now navigate to the browser so we can we can see that it is working but the display is not exactly what we want so i guess it's because of the styling that we we had that was generated at the beginning of the the application let's just remove it and voila so we now have the toolbar plus this side menu and then all of that thanks to the schematic that we added at the beginning so we also now try to add two component um a to do list component uh and then we also use it to do component and we are going to use these two components to create a database so now let's try to generate these two components so i first need again to cd into the app folder then i will copy the path and paste it and npx and g generate component you can call it to-do list so again we have this error so let's add the module ebp so with this one we now have our at a component that is generated and this component uh will be d1 that will display all the to do items that we do have in application so this this component will do uh a get request to get other to do items that we have in our backend so now what we also try to do is to write the html page and we can use the mod card for it so now let's head to the angular material page and find the mod card that we used so we will copy this snippet here so we do have some errors because you haven't yet imported the mad card module so let's import it so the mud card is now uh imported and now if you navigate to the page or is still not shown because what we now try to do is uh we need to generate the routing module you know we need to to add that module and you can generate it by using npx ng generate the module and let's call it app routing this command will generate uh this module in a new folder but if you don't want to do that we can use the dash dash flat and then it will generate it in the same folder as as a app module then again we also use a dash dash module app so that it can be imported directly within app module so now the routine mode joule is generated and then it should be imported in the epp module so now if we go to our app routing module so we need to create a route constant routes is going to be an array and the route is of type routes so we also now need to define our route so we add the path to do our plural form and we add the component to do this component that we created so let's also import the route so we are going to uh to impor to tell here that uh our to-do list component is to be rendered here by using the router outlet and then the error that we had while we were writing the router outlet is because we need to to export our router module here now let's start writing out to-do list html page so we there is a title to it and then we use add to do element so for now they are just some div that we used and now if we if we navigate to our browser so we can see that uh it is displayed now let's also add a to-do component so again we need to to navigate to our app folder and then we generate a component a component is created they are generated and inside this component let's create an interface to do which has an id and and a name for both type string so you have an id type string so in name type string so it is complaining that uh we haven't used that to do so we need to to export it and then we can we can use it in to do this component so in the to do this component we now create an array of to do so before we get the data from the backend we can just have code the values for now now that we do have a to-do list here we can loop over it in a template and display it to the user so i will use uh the math list that that needs also to be imported in the epp module and also i try to add a button to display the the to do item so after making all those small changes known let's add some css classes just for styling it a little bit so now if you now look at at the page uh actually component is is word is well rendered so we we also try to handle at a click action when we try to click on this button and then uh by by clicking on it we can run that to do item in another page and for now also we only have a single information on the to do item which is its name but i mean this name is just a description of the to do so we can imagine that there are several ways that to interact with the to do item like editing it deleting it and so on for some of those interactions we can move them uh through to do item page so far at julius is hard coded in our component so what we now try to do also is to connect our front-end with our backend and then therefore we need to do some http requests so we need to do this component will be called app service and app service will make the necessary requests for us to get the data that we need if we now navigate to our release page all the elements are displayed so there are some empty rules because it pushed the backend some to do's that were empty before but now also let's add um it an input where we can directly uh also add a to do item directly to our backend uh and so we also need a an additional button where the user can click and uh and push that that to do element to the backend so for that for that we are making also a post request where we can send this to do elementary backend we are also we need also to to import the mat input module since we are using the input in our in our template so in the meantime also we try to handle uh the action on the display button so it can redirect to a new page so we are creating a new we're calling the display to do a method so we haven't yet created it so let's go also and create it in the component and now let's inject your route and activated route and use them to navigate to a specific to do page and this routine here is using the id but our backend doesn't send us the id uh element uh uh mongodb does send us an underscore id so let's make some some changes on the backend so that we can get an id instead of an another score id so we make a transformation on the schema using the transform function now back to our angular route we also need to add another a new entry uh for the for the to-do component and in our to-do component itself we now need to call uh to query the database so that you can send us the detail regarding a specific to-do item using the id that is in the in the route in the route of the to-do item so the backend doesn't have yet an api endpoint to return it to the item so we also now you now need to add it on the backend side so with all these changes if we navigate now actually to do this page we can add an element but if nothing happens uh because uh if you inspect yeah it's because uh we needed to refresh the page to see the the element that we we added so we can see here at least that the post request to add the to-do is working but we can just add a small change to the to-do list component to update the page after a new to do has been created so here we subscribe subscribe and then uh when this subscription is is called then we can yes you can just called the get to julius so here we can now see that when we add a new to do it works perfectly so here on this on this to dry temp page something you can do is just to display the to-do name since it's the only information that we do have about the to-do item so we are getting the to-do here we subscribe to it and then when we receive the data you can just assign it to the to the to-do attribute that we do have and then in the template we can just display the name the name property of the to do attribute so if you navigate again to the page well we do have a small arrow here when it seems that the url is malformed well it's nothing you already smartphone here so you need to make a small change in our fbp service so we are not passing the id to the request [Music] so now again uh if you navigate to the page after making this small change let me refresh the page and voila we are now able to make this the query and to get the data associated to to that to the item so we can see that uh we are now able to make the same queries as you were doing in the previous video using the contact line extension so there are a lot of things that we can still do for this application so the styling for this 2d component or adding other queries like deleting to your item so we talk about it as we continue our journey with this application so hope you like this video and don't forget to subscribe as we are journeying together and completing this application so until the next video

Channel: kedevked

Views: 405

Keywords:

Id: kUR3g6xl2Cs

Length: 26min 54sec (1614 seconds)

Published: Fri Jul 30 2021