Full Stack Web Developer in 2022: Angular, Bootstrap, Typescript [Part 2] | Alexandru Rosu | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Full Stack Web Developer in 2022: Angular, Bootstrap, Typescript [Part 2]

teacher avatar Alexandru Rosu, Technology matters

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

16 Lessons (3h 25m)
    • 1. Introduction

    • 2. Install NodeJS

    • 3. Configure Angular CLI

    • 4. Install Visual Studio Code IDE

    • 5. Create and configure the Angular project

    • 6. Implement an authentication mechanism

    • 7. Add Login Component

    • 8. Find All Users UI Components

    • 9. Adding main UI cards

    • 10. Add new user

    • 11. Find User By Id

    • 12. Implement a filter process

    • 13. Find By Criteria

    • 14. Support for editing and deleting

    • 15. Delete user mechanism

    • 16. Update user full flow

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


This is the second class of the two class series of building a fully functional Full Stack REST API based application.

By taking this class you will:

  • Build a frontend project by using a bundle of latest web based technologies such as Angular 10, Typescript and MDBootstrap framework
  • Understand how to structure an Angular based application in different sections
  • Implement an Authorization Mechanism

  • Include Login and Users components

  • Add support of working with Angular Guards

  • Include different UI components as part of integrating MDBootstrap framework

Are there any course requirements or prerequisites? Yes, just a few

  • Basic understanding of Angular and Typescript
  • Willing to build a step by step front-end application from scratch that will connect to the back-end server and interact with it

Meet Your Teacher

Teacher Profile Image

Alexandru Rosu

Technology matters



My name is Alex and I am happy to join skillshare as an teacher.

I have a bachelor degree in Computer Science and a Master Degree in Multi modal distributed virtual environments.

With a strong passion for programming, I enjoy finding solutions to various IT related problems.

My favorite programming language? I can tell you that it's Java, but I have also worked with other languages such as NodeJS, Angular, Typescript, Python, etc in my previous 10 years of experience.

Will be happy to share my knowledge and create great content for everybody who wants to join my classes.

Let's build awesome things together :)

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello guys, and welcome to the second part of the class series, where we will be together a complete, full stack based API, web-based application. While in the first class of this series, will focus on building the backend side of our system using technologies such as Java Spring, Boot, spring Security, and many more. As part of this class, we will move our attention on building together the front-end part of our full-stack system. This will involve working with Angular ten, MD Bootstrap, UI framework, type script, awesome, and many more. Are you also excited? If so, let's get started and built a frontend part of our full-stack system together. 2. Install NodeJS: Our next step in our configuration process is to download and install NodeJS. So I can type in, download no GS in your favorite browser. And now you need to navigate to the node js.org page that opens. And over here, you need to use the latest l ds worse shown. And for my environment, I have Windows 64-bit. And let's choose the Windows installer. Wait for this to finish. And we will install NodeJS sonar environment. Let's open it. Click on Next for NodeJS setup. Next. This is basically a simple process to follow install. So now no JS is installing using also the MBM that we'll need to use as part of our angular or build project. So lets click on Finish and verify for node and NPM had been installed. I open a command prompt and type in node minus v, you see the word Shun and NB and minus V, c also the version here. So everything is in place. 3. Configure Angular CLI: In this video, we'll work together on setting up Angular CLI on our environment. So I'll type in Angular than the browser, and we should navigate to angularjs dot IO. This is the main page for angular website. And let's rests on gets started. And we are wrong with the documentation. And let's click on Get Started tab. And over here on the Setup page, you see that setting up local environment and water space. And we need to search for the corresponding command to install Angular CLI. You see that this requires so no GS that we already installed. And MPM package manager. So this two already installed on a previous video. And you see the comment here, npm install minus g for global Angular CLI force, we should though chip for the NPM version. And now let's type in npm install minus g Angular CLI. So this will allow us to install, loan the package globally. And this so CLI will be used to properly configure angular obligations from our command line. And you see that the Angular CLI workshop Dan has been installed. And we can check it using the NG comment. 4. Install Visual Studio Code IDE: Under this video, we'll set up Visual Studio Code ID that will be used for Angular project. So let's navigate to code Visual Studio.com. And over here, we should select the system installer, 64-bit. Let's say download it. And we'll install this Visual Studio Code ID. Some help or tutorial Sander domain page. Now let's install it. We should create a desktop icon. Click on Install button is pretty straightforward and simple guide to follow. And let's launch Visual Studio called The Visual Studio code is already in place and working. 5. Create and configure the Angular project: Under this video, we'll set up the basic structure for our UI version of the application. So let's navigate to our projects folder. And next to the demo server application, we will need to create a demo UI project. So let's open the command prompt. And we should type in new demo UI that will generate our Angular project called demo UI. Would you like to add angular routing we should select, Yes. Which style sheet format would you like to use? We'll go with CSS. And now the packages are installed. Our speed up the video for you to do the final results of our installation packages process. So the packages were installed successfully. And now we need to navigate to our newly-created project. So cd demo UI, and use the code space dot that will open the project in our Visual Studio Code ID. So you see that this is the basic structure of an Angular application. Will have different folder setup already configured by Angular. And the first thing should be for us to navigate to the packages that JSON and also open a new terminal and under the script, so corresponding JSON statement. For the start, we need to set up NG serve minus minus o. And when we type in npm, start on the terminal. So the application will start and it will be opened automatically in our browser. Let's wait for the files to compile successfully. We can see that the angular ten is used under dependencies section from R packages that JSON. So all files are compiling now and in an automatic manner, the application which show up in our browser. Connected to local host 4,202, the corresponding port. So you see that the app is running and by default we will see this, this page. So let's, let's try to remove all that default content that comes with the with our app from the main page. So we need to navigate to app component, that HTML. And over here, you need to remove this entire content and leave only the router outlet that is used for the routing processing angular. So let's remove this. We see that sources were compiled successfully in an automatic way. And navigating back to local host 4,200. You see that that content has been removed. What for logging purposes, let's set up ACH for statement with the app is running. Just to see that the app is running in correct way. So now we should been together the MBI bootstrap framework to our Angular application. So navigated to Material Design for Bootstrap corresponding page. And you see here that MD Bootstrap can be integrated with server allo frameworks such as jQuery, Angular, React, and so on. So this is the main page of our frameworks that we will use as part of this course. Over here on the menu, you can search between several components that this framework allows us to work with. This framework, of course, will use the free version of it. That is also a paid version of the and the bootstrap framework. So I would like to invite you to investigate all these components, bottom group cards and so on. You see that this framework is very rich in terms of corresponding components that you can use. So the next step in our process is to. Of course, integrate in a way or another this framework Condor R0, basically empty Angular application that we just created earlier. In order to do this, let's go under our browser and type in Andi Bootstrap Angular configuration. So this should do open up. Let's open this angular installation guide. And you see here that there are several steps that we need to follow in order to properly been together the MD Bootstrap and our Angular project. So let's follow this. The first thing is to create an Angular project. We already done this. We have our demo UI. The next step is to install the angular Cdk. So let's see, copy paste this command and go to our Visual Studio code terminal. And create. Actually open a new terminal and copy paste this specific comment. And of course run it. You see that this requires angular version nine minimum, and we use Angular version ten as part of this course. Next thing is to install the NDP Angular on packages. So let's type in this command. So we'll install the angular and the bootstrap minus MD. And after this will be installed, we need to navigate to app module.js to do some specific configuration as part of this project. So the framework has been set up and installed in the packages that JSON file. Now under app model that yes. You see that we have the engine module already present. And we need to import the MDB bootstrap module from Angular bootstrap, MD. As this is a required step in order to properly. Configured and the bootstrap module four root. And now under the import section, let's insert the MDB bootstrap module four node element and save this file, of course. And now we need to go to our Angular.js JSON and update border styles and scripts arrays with specific data from and the bootstrap corresponding framework. So let's do this. So we'll copy paste this section. So let's go under the styles. And over here, let's base this OK. And be sure to use the CSS styles file since he, if you recall, our Angular, our project is based on CSS. And now let's copy-paste scripts array. So we set up under the Scripts are a from our angular Children's Zone file. And now we need to install specific external libraries. Jazz chart formed as some hammered GS animate. So let's go to our terminal. And I just copy pasted that command. All the libraries work properly installed. And let's restart the application to also remove that too. That was showing in the logs weight for all files to properly compile using also the bootstrap specific files and also the libraries that we just installed. So all components are compiling now. And you see that we can navigate back to the browser on local was 4,200 port. And now we will set up the initial structure of our project in terms of components. So we'll generate a new component called user, and this will be set under the components folder. So we have user component HTML, User component ts, the type script file. And you can see under the app Model Ts, the user component has been automatically configured here under the declarations. Alright. Now we will generate a corresponding service. So this will be set under the services folder and will be called user. This will be used to properly interact with spring Voto server application. So under services you see that user service TS has been set up. So the basic structure is in place now. 6. Implement an authentication mechanism: Under this video, we will like to sit in the sun authentication mechanism so that we will be able to connect from the UI application to the backend server written in Spring boot. So let's go to our terminal and type in NG, generate surveys. And we'll store our newly greater service under services. And this will be called authentication. You see that a newly created service has been set in place. And now under app module ts file, we'll need to import the forms module and also the HTTP Client module. Since both of these modules will be used as part of this video series. And let's also import HTTP Client module from Angular HTTP corresponding package. Now, under our authentication service ds, we need to import a bunch of things. So the first one will be the HTTP client. Http bottoms. Http error response will use all of this standard, this authentication service to invoke the login method on the springboard server side. Also, we will need to catch error and the map functionality from the parallax HGS operators package. And of course, in order to make the request a sync, we'll need to use the observable. And let's also important, don't throw error on the edX JS package. Now under the authentication service, we should define a method called authenticate that we received the username and password as parameters and were returned on observable of any. Under this method, will force setup a constant in place called body and will create object of HTTP bottoms. And under this body will set the username as the username that we receive as a parameter to this method, and also the password as the password. Now we need to invoke the HTTP functionality. But for this, let's import HTTP client under our constructor. Let's inject it actually. So private HTTP, HTTP client. So now we can properly use it. So we'll do a post requests to our backend server. But we need to define the specific URL that we need to invoke. So for this, let's create the constants class. This will be a type script class. So let's call it constants that ts under app folder. And lower here, Lovell's thing to note this to export the class constants so that we can properly use its elements inside our application and define those several URL of type string that will match the location of our server. Please know that we are not using docker at this point, just the local host. And now let's go back to our authentication service, DSN. Important is constants class from constants. Okay? And now we will go with this HTTP post constants, that server URL. And if you recall, we need to invoke the login URL from our server side in order to do the authentication. Send also the body that we just created. And as for the response type, we will use a text. Now we will walk the bipolar operation. And also the map so that we will transform the data that we receive. So let's set in place the response as a variable. And if everything worked well, using the lucky no operation, we will use the local storage of our angular application and set an item or where over here. Let's have the key as user. And for the value you will use it. And for the value we'll use the door. That is a method that will encode this as base-64, so called Bordeaux username and password. And if we end current or any issues, will handle the catcher statement with error of any or HTTP error response. And we'll throw the error. Things look good for our authentication service. Now let's create the package for our interceptors. An interceptor will be used for each request that we do from our UI application. So that whenever we invoke a specific request form on the server side, the interceptor will be set in place automatically. I'll show you how to do this. So we're importing the injectable from angular core, the HTTP request, HTTP handler. And we'll need to use HTTP event. And HTTP interceptor. Ron Moore and the hormone. Http are also important to observable. From RX GIS package. Our interceptor will be annotated with injectable stereotype and will export the class, let's call it bears ought interceptor. That will implement the HTTP interceptor. We need to implement the intercept method request of HTTP requests any. And for the next method in our load flow, we will use the HTTP handler. So once again, this is just an interceptor that will intercept each UI requests. And basically we'll add the header. If you recall. On the server side, we need on each request or requests should actually be authenticated. So we need to handle this from the UI side. So we will define a variable called current user and extract the user that we have in the local storage using the user key. If you'll recall, we're setting this user under local storage whenever we authenticate for the fourth time into obligation under the authentication service ab.js file. And if the current user is in place. So it means that we were able to authenticate to the server the requests that we have as fundamental to the intercept method will be clone. And we need to set the headers to our couldn't requests. And for this, we will set the authorization header as basic and also extract the value from the current users. So the current user will have that base-64 computed of username and password. And of course we need to continue our request. So we'll use the next dot handle requests. Now we need to set in place this interceptor so that the application will be able to use it. So we need to go under app module.js. And under the provider section. We need to define a statement here, such as provide HTTP interceptors. Use class. We need to use the basic or interceptor. And let us also define the multiset true. And of course we need to import the basic quality interceptor. 7. Add Login Component: In this video, we'll create the login component for our UI project. So let's type B and G generate component. And we'll set it under components folder. And it should be called login files for properly generated. So if we navigate down the components login, and you see here that we have the type script file that corresponds to our login component. The first thing to note is that we need to import several things such as view child. And after viewing it. So this login component will be used to properly authenticate from the UI application to the Spring boot server side using the authentication service ds. So we imported the authentication service from the services authentication service Paulson into import the HTTP client from Angular HTTP. And we also need to router. Since based on authentication process will allow the user to a specific page. And of course, we'll soon in the constants from from the constants file that we previously set up. We also need to import the bootstrap specific references. So this will be ordered finance that we'll use as part of working with Andy Bootstrap dialogues. And in order to properly connect to the HTML dialogue that will set up, we need to abuse a child element in our type script file. The authentication model is the name of our modal dialog that will use. And it's so dipole model directive will also set in place some variables for the username of type string and for the password. And an error message will be used in terms of exposing any errors that might arise. In the authentication process. Under the constructor where we'll inject the authentication service and also the router so that we can use them on your this type script file. And let's also set up specific message just to see that this component works. So constructor for login component, this is just an informative message. Now since we import that after viewing it, we can use this type script lifecycle method n g after viewing it. And we need to implement those after the, after viewing it. And let's go to the end yarn init. And first check if we have the user key and the local storage. This means does the user is already authenticated? And if the user is already authenticated, we will use the router navigate method to navigate the user directly to the user's page. In this way, he will allow bypass the authentication or process. Well, so set in place, show more dialogue method. And we'll verify if the user is not authenticated. So that local storage or getItems of user negate, that means that the user is not currently authenticated. And if so, will expose the authentication model. And let's call the base this on the factor unit method. So the user will be prompted with a modal dialog to enter his credentials in order to authenticate. Now for domain no metal for far type script class login of type void. Let's also check if void was set for the other methods. So under the login method, we will invoke the authentication service authenticate method, passing the username and the password. And will involve the subscribe method. Now we'll review if the authentication process was executed with success or not. And if any arrows might arise when the authentication service will expose this error, actually lets add more specific message under the error message such as user name and password are invalid. If we weren't able to authenticate to the server. We'll use the router navigate method. And we redirect the user to the user space. And also let's handle the case where we receive an error under the authentication service authenticate method. So in this case, we'll set on the error message a specific statement. But for this, let's go and use the constants class and define the error message here, such as public static. Let's go with the Internal Server Error message. So something like error in communicated when server. Let's use this now. So constants internal server error message. So now we are ready to implement the MD bootstrap specific login dialog under the login component HTML page. So let's clear this. So these are specific and the bootstrap statements, div and the model authentication model. Please recall that this authentication model needs to match the view child element that we set up the type script file. So that the ties to file will be able to know the reference for the model. For the ID, authentication model, class, modal fate, and the tab index minus one. For the role. We can go with. Dialogue. The style should be set as overflow minus pi, all top area label by authentication model. And the area hidden we should go through. Also, we will use the closed event for our model so that when the model will be closed, we will invoke the show modal operation. In this way. There is a will not be able to bypass this page. And if, for example, he closed this model by mistake, no model will be automatically shown back. And we'll also need a method called claire form data. And let's add it here under the type script file. So clear form data of type void. And in this case, we should though clear error message in case of any error messages that were previously shown and also less clear the password. So the username, if it was present, where remain. Let's close this div. And now let's do some space. At least for this model, for this Fordist model, I would like to set some indentation for you to review the different components. So now we're building the modal dialog without all document and div class modal content. Let's close this div also and make some additional space, so forth. The modal content will need to sit in place the modal header. Now, the modal corresponding body. So this will compute the body or far or dialogue. And if you recall, when set in place a specific variable called the error message. And whenever we will have any content under that message, we'll use the if statement to verify this and expose this Aleppo div section to the user. So this is why I set up this tip in place. So for the error message, Let's add this error message under specific div of coal in the 12. Now this is closed. Okay? And let's move forward lambda2 model body and create a new row div class called and the four. So what we're trying to do here is split each row that we are creating in two parts. So the first part will be the actual law field that we want to insert data for. So for this, we'll use MDB batch, MD bootstrap specific tag. Let's set in place the username. And for the second part of the RO will use coal in the six. So we need to set the actual input field. So input and the B input type of text ID, username. That class should be form control. And the name should be, of course, username. And as a place holder, we can set the username. Now for the 2-way binding using NG model will set the username enter required focus. So corresponding tags now need to sit in place something similar for the password field. Div class row. If class called N204. H4 and you'd beat badge pulled set to true. Now for the password to set the goal. And the six. And the input type should bid this time offset to password. Since we don't want this film to be exposed in the UI ID password. Glass form control. Placeholder should be password. Password, of course. Now for the NG model will have the password to map the variable in type script file and also the Required. Now we need to set the model folder of our dialogue. So please note that this is external to our modal body. Reclose the DAG. So under the modal footer, we wouldn't need the button in the bottom. And the polar should be primary. Glass waves light. Eddie, I'll label where it can go with downtown indication. And for the click event on this button will invoke the login method from our type script file. So login component ds, your recalled a login method will add n dv waves effect. And for the button text, we can go with authentication. Now let's clear this state months. We'll make this dialogue more or more visible in terms of which tags, which tag, closest, which stack, and remove this spaces. Now let's go on there. Ap routing module that was set automatically by angular configuration or process. And we need to build our routing module here. So I imported component from components user reserve component. And we need to also import the login component from the components login and login component. And under the Routes section, we'll set the path for the users. And when the user, we'll navigate to the user pad. Component will be used. Let's make some space here. Now for the login, Pet, Login component will be used in this case. And if not, we need to also handle a specific case where we don't know the actual URL dot we need to redirect to. So by default, this will relate detected to the login component. How I would like to generate those specific garb. So energy generate Guard under God's folder, we should call it authentication. Which interface would you like to implement? I would go with the can activate interface. And lambda of the gods folder. You see that you have the authentication guarding place. And over here we need to implement business logic such as the users component will be able to be shown to the actual user only if it has the right to do it. So we need to do a check from the local storage, get item of user. This means that the user is authenticated. And in this case we return true. And if not, it means that the user is not authenticated and we need to redirect it to the login page. So the final return would be false. And we only worked on this router navigate. Let's set the constructor here. So the constructor will inject the router. And also let's import this an altar component. So now we can properly use this router component to navigate the user if it's not authenticated. Login component automatically. And thus greatly bottoms, we will return the URL and state that URL. Now let's go back to our routing module and use this God under the user's path. So can activate and will set in place the authentication we are. And we also need to import it. So a user will not be able to access the user's page if it's not authenticated to the system. Now let's look on our app to see how things are going. And you see here that we have some, some issues. So let's look on what exactly is happening. You see that? And the bootstrap seems to not work properly. And for this, let's make sure that under angular JSON file, we need to use the styles and the scripts corresponding data that we set up in our previous video on the build angular.module sections. So not this content that we added at the bottom. Please be careful with this. So you see here, I'll move this section. I'll beat up since we have two array of styles. And this should be set up here. And similar for the script, sorry, we should migrate it up there. This array. And for this to be taken into consideration, let's stop the server and actually started using MPM start. Now you see that app looks so much better now the dialogue, but though we need to do some additional improvements, sunder, app component, HTML, we need to fix this dialogue, so be careful with this also. So let's see this indentation process on the div statements and identified an error here. So body or far dialogue was President under the header. So be careful with this div indentation. So at the end you should have only four divs. And you see that the login component works now or no better way. Let's also add remove that string. Of course, you will have this source code o for the project that you can use as a reference. So let's go under app component, HTML editor. Move this. Now you see that the dialogue is present. And we should use the admin, admin and basically do authentication to those bring food application area direct the user's page, where you will see that the user's page actually is in place and working. 8. Find All Users UI Components: In this video, we'll set up the structure for our find all users API. So that will communicate from UI to the backend. So first navigate to the constants class, where we will need to set up some constants in place. So we'll set up a constant for public static users resource that will point to R server URL API users. If you recall, on the server side, this is the main entry point for our users resource. And now we will define the but for our fund, all users API as a string of course. And in this case, this will match exactly the users just source. So it will be local host 8080 slash, api slash users that will need to connect from the UI application and basically extract data from the server side using that URL. So now let's go to the user service Ts. And the first thing to note is that we'll need to add the HTTP client reference under our constructor. Since using this HTTP client component, we will be able to interact with the backend service. Using HTTP calls. Will also need a reference to our constant class. So let's import it. So important that constitute class from the source app constants. And now let's set in place a method called findall users that were returned on observable of any. And we will use the HTTP reference getMethod. And we'll call the constants find all user reference. Now let's navigate to our user component ts file. So this is the type script file for our user specific resource. And over here, we need to import the user service. Since this will do the communication to the backend service that we configure for our Supreme Court application. And of course, we need a reference to our constants class. Let's save this file now. We'll add a comment, descriptive comment. And we'll need to set up in place somehow specific variables that we'll use as part of this. Find all users API implementation will need done users array that will keep all our users in place. And for the table that will construct, we set up our user's table headers of type any with specific strings that will be shown in the UI. So we'll expose for each user ID, the username, the password, even if it's encoded, the firstname, lastname, age, and of course the country. So please recall that this these variables matches directly on user from the server side. We'll also need to setup some common elements. So I'll use the main message. The main message as string will be used for exposing informative messages. I will set in place a method called final users of type void. And imagine that we might have already some existing data in the user's array. So first thing to note is that we do clear the users are a just in case we already have some data over there. And now we need to call the find all users API using the user service. In order to retrieve user from the backend service exposed in the Spring boot app. So we will use this.userId service. But of course we need to inject the user service in the constructor. Since we've just imported It, was not injected it. So this that user service, the final users. And we need to subscribe. And based on the data that we receive from the final users API. Let's recall that we will receive an array. And now for each user, we need to push and basically add each user to the user. Sorry. So now the user's array will contain all our users exposed from the server side. In case we received the narrower will set this up. We set this error under the main message string. And of course, we need to invoke this method. So this method will be automatically invoke under the NGOs in it'll Angular lifecycle method. And next step is to navigate under user component HTML and build a UI works on for this final users API. So we'll set in place specific MD Bootstrap table, the head class, black, white text. And now we'll construct specific rows. So on the first row, we'll need to iterate over the users table header, scope as coal. And we will expose each row entry from our user's table headers. So I created for this NG four specific angular loop. And now for the p body, use the TR MDB table called and the same energy for specific angular statement. And for this we will iterate over the user, sorry, that of course we have in place form the final users API. And we'll expose each property from the user variable that we use in the iteration process of the user's array. So we will use the user ID, the user username, user password. Please recall that all these variables are directly exposed by our Spring boot server API. When we invoke the find all users API. And each user has this property set in place for him. So user firstName, lastName, user age. So we are using here the interpolation process from Angular and user country. And now if we navigate to the user's page, we see that the table is in place using all the corresponding headers and data is extracted correct way from Spring boot server. I would like to format a bit on the main page of our application. And for this, we'll use the jumbotron class from the end, the Bootstrap framework. So let's copy paste our outer outlet over here. And using this, we'll have some space in the UI. 9. Adding main UI cards: Under this video, we'll set up the main UI cards that will be used into our application. But first, let's, let's also use this informative message that we want to expose in the UI since currently is not exposed. So we'll create the div class alert, alert info or all will be alert. We will also use the main message as an ng-if. So, we'll expose this def only if we have any data present in the main message. We are compiling the code now. Added fresh page. So currently we don't have any main message that we want to expose. So let's simulate this. On the final users API will set domain message as user retrieved. So you'll see now that the user retrieve, users retrieve messages shown just as a demo. Let's remove this. Okay? So that informative message works also. So lets go under User component HTML and set up some initial cards in place that will work with as part of this course. So div class card deck. Since this card deck is a specific MD bootstrap class that we will use with three different cards. So MDB guard, MDB card body. And for the NDP card title, let's use something like find user by the for the MDB card text on your formative descriptive message about this operation. So this will retrieve the user based on the corresponding ID. And let's set in place of button that at a later point. We'll click over it and do, do some operations that were extract data from the server side. So bottom dive button and the button color primary. And for the button text will be open. So you see the first card when set in place. Let's add descriptive comment. Find user by ID, specific card. Now let's move to the second guard. Find user by criteria. So if you recall, on the server side, we had implemented an API that will find specific users based on criteria. And we will also want to use this in the UI. Science seti got the structure for this card also, find user by criteria similar to the first card, of course, MDB card texts. We'll use something like we retrieve user based on specific criteria. And let's set in place so similar button as we use for the first card. The color primary and the same text message or one. So the second card is in place. And now we should go on the third carp. This will add a new user. So MDB card, MDB card body will need a title. So this will be add new user. For the NDP card, texts will lose, add new users to the list. And in a similar fashion, we'll setup a button, color, primary, and the open texts. So now we should have free cards in place in the UI. So all three are in place, but we need to do something in our UI. Let's do BR tag to have some space between the cards and they were. Now it looks much better. And the next step will be to implement the business logic for all three cards. 10. Add new user: As part of this video, we will implement the business logic for admin user API. So the first thing to follow is to go under the constants class and set up a new statement. Public static, add new user of type string. And this will be computed from the constants that user resource loss add. Since on the server side, this is the corresponding metal signature. Now under user_data services.js class or service class, we're setting up a new method called end user that accepts an user as a parameter. And we returned observable of any. And we will invoke this HTTP post of constants add new user. And we will also send the user to the Spring boot server. So on. This method will be invoked and user will be added to the database. Now under user component ts, that type script file. Let's import the model directive that will be used to use MD Bootstrap modal dialogues. And we also need View child element from angular core to be able to properly interact with the modal dialogues from the HTTP, from the HTML on the rod type script file. Now let's set some variables in place. For the end user operation. For S1 will be a reference to the end-user model that will compute as part of this and user operation. And we also need some specific variables to define the user, such as the firstname, Stipe string, lastName, username. The password. H will be a number. And also the country set does string. Let's fix the h variable. H as a number. And country also as a string. Let's save the file. Will also add informative message that will be shown in the. Alerts section and a dialogue section. In case of any error or sore, maybe some informative messages. Now we need to set in place are clear data method that will be invoked each and every time we need to clear any existing statements from the HTML page to clean basically data in the UI to have empty fields to work with. So imagine that the new popup dialogue will be shown opened in the UI. When not to have empty data that we need to present, such as the user will be able to properly add their specific data into the dialogue. Now main message and add new user info message, and also all the fields and mark them with their default data. We should move forward and create a method called add new user of type void. And the first thing to check is to verify if the user in UI has basically set up any values for the first name, the last name, and the other fields, such as user name, password. So we're checking here if the length is 0 for any of these fields. Since if it's 0, it means that not all low fields that are required to be mandatory or properly computed in the DOI. So you need to inform the user using the annual user info message. Must go on the constants class and define a new variable here. Public static, mandatory fields, error message fields are required. But in fact, let's go with the mandatory fields are required. So let's go back to our type script file and use the constants class and a mandatory fields error message. And also we should not continue with the flow and just do already turned here. So the user will be informed that not all the mandatory fields were computed. And he needs to fix this. Now, if everything worked well, we need to basically compute the user object that will be sent to the server side. So the firstname will be computed from the this.name. Similar for the last name, the username, this, that username. The password, of course, will be encoded on the server side H, and we also need the country. Now since we have this user object in place, we need to use it and you basically send it to the user service and new user method. And those subscribe. And if everything worked well, and we were able to invoke the Spring Boot application and add a new user. Will first hide the modal in the HTML dialogue and add a descriptive or informative message to the user that the user has been added. Also, we need to update the existing table in the UI by calling find all user method. And in case of any errors. We'll use the add new user info message and set the error to it. Be shown in the UI for user to know what happened. Okay, looks good. Now let's create the HTML part. For the end user or specific business logic. This recall that we need to compute and the bootstrap dialogue for static common for our existing. Find all users. That table that we set in place already that retrieves all the users from the backend server that are present into the database. And now new comment or adding the new user. So this will be a modal. And the bootstrap specific mono. So we open the div NDP model and we'll need to use the hashtag and UserModel. Class should be modal fade left. And four tab index will use minus1. And as our role will use dialogue lifecycle that the czar specific MD bootstrapper references. So Style overflow, auto. Area labeled by n, use model. Area hidden will set to true. And now on the Open, the modal event will invoke the clear data that we set up in the type script file. So if you recall, the clear data will clear any data that was previously set in place. So this is a trick that I'm using here. Now we'll create a new div class modal dialog. And the role should be document div class modal content. So now we are building the content of our dialogue. As for the model header button in place. So button type, button of glass, close pore, right? A real labeled clothes. And on a click event for this bottom, where willow one to close this model. So we'll close the end-user model. We will use now span area hidden true, and will mark this with x. So when we press on the X button or far dialogue, this dialogue would close. Now will set in place the modal title. Id and the user model. And the descriptive message. Or add new user. Basically describe what this model is for. Let's move now to the next step. So for modal body, we weren't forced to set the informative message. So we're is in div class row alert, alert, primary role of Alert, and will only expose this div if we have any statements present on the end user info message. So for example, if we have an arrow over there, this div will be shown to the user. And let's expose it and user info message. So if you were to call this add new zoning for message is shown. For example, if there is or hasn't set data for all mandatory fields. Now let's create a new row. And basically it in two parts. We'll use div class called MDG4. And now let's set in place. So ND bootstrap tag for a badge. Just for some visual effects. Let's set the firstname. Now. The second part of our row div class called and the eight. And we'll set in place on input tag and the B input of type text. And for the 2-way binding will bind this to the first name field. Ok, class form control. And the values should be firstName. So whenever the user will update this field in the UI. This will also be shown actually this will also be marked as updated in type script file. Now will set in place a new row. Let's follow the same process for adding functionality to expose the last name. So the glass col md for each five. We will use the badge default true. And now the second part of the row div class or eight. So input and the input of type text. And for the 2-way binding will use the lastName field glass, of course, the Form Control and the value should match the lastname. Close this. Moving now to the third row div class called MDG4, H5. And they'd be badge default to will set in place the username. Now the second row, and put the B input type text. That two-way binding for the username field. A class form control. And a valid username will set in place a row for the password field H5. Ndp badge default to true. So you will see the same DB batch in the UI, how this exposes the our fields. Now for the div class called him the eight. We'll need to use input and the beam put type of password this time. Since we don't want this password to be exposed. For the NG model will use password plus one control, no value for password. Now I'll specific div for our h field K and if a badge age. And for the second part, Let's not forget the div. So coal. And the eighth. Let's copy paste this under the div section. And you model or the H field. So if you recall, we have the first name, last name, username, password, age, and we're now setting in place the last field country. So this fields match directly though, feels that that exposes an user in the spring Boot application. And you might ask about the id. So this ID field will be automatically generated from the GBA entity and our MYSQL relational database whenever we certain user into the database. So this is why we don't need an actual ID to store it here. What beside this, all the fields match directly on the server side on how a user is exposed. So we set also the contrary div. And now let's set in place the modal footer. So bottom type or bottom. We need to create two buttons here. So the fourth S1 will have color primary, and the class waves light and ADR label. We'll use the safe. And on the click event. This will invoke the add new user telescope method and DB ways effect. Okay? And we set the save method, the same statement. Sorry. Once again, this is the admin user method that will be invoked on the flick event for this button. And now for the second button. This will be associated to the council operation. In case we don't want to save the user anymore. Or button by button. Color should be secondary. Glass waves, light, airy, I'll label. Should they counsel? And for the click event, we just need to hide this ad news of modal end DBA waves effect and also set the text for this should be counseled. So now we should have everything in place. Now we need to go to our add new user card and basically expose this dialogue whenever we click on the Open button. Such as we need a way to invoke this dialogue. And you see that I was able to press on the open. And now let's add firstname, last name, a specific user name, or password that should be encrypted on the server side. And the country for USA. And we'll save it. You see the message user has been added. So the back-end spinning publication has been invoked. And you see the news are being added into the list of users. Well, it's also fix this on the other constants class since we forgot the vault, the typo far or fields. So string and string. And this should be also fixed. So add new user wards AS expected. Now. 11. Find User By Id: Under this video, will work together on setting in place to find user by the business logic. So first thing to note is to go under the constants class and set up a new variable, public static. Find by ID of type string should be computed from our constants dot user resource. And we will also add ID. So moving to the user service Ts. Let's set in place some method called find user by D That really C11 ideas per kilometer. And we return no observable of any. And under this method will invoke this HTTP get of constants find by ID. And we'll concatenate the ID to it. Now let's go under our user component type script file and set up some specific data that will work with. Let's add a comment here. And these are by ID. And the first thing will be viewed child element that will allow us to interact with modal dialog from the HTML component. So the modal dialog will be called bind user by the model and its type modal directive. And we also need the ID has number and we'll set it initially as undefined. Also, find user by the message will be use in terms of message for our find user by the motto. Clear the data. Similar to the main message and add new user info message. And also, let's clear this field under the common clear method, clear data method. And now we will set in place method find user by d of type void. And over here we first need to check the value of FAR ID element. If it's not unordered_map. And if the idea was not present in the, was not actually sit by the user, will inform the user. So let's go on down the constants class and define a new state one here. And use the reference to it. For example. Something like not the number error message. And we'll have our opponents to it here and do the return so that the user would not continuing the process. If we have a valid ID where u z to involve the user service, find user by the method. Do the subscribe. And on the success case of invoking this method, we'll need to force the clear existing array of users. Since if you recall that the users are array contains all the users in the UI corresponding table. And now we need to just push this user bed. We retreat into the user array. So only this user will be exposed to the actual gland that invoked this UI functionality. And on the error case, we first need to check if the status is equal to 404. It means that the user can be found. And let's add a constant value for this. So public static, user not found of type string. Let's go with user not found error message. And a specific message that will be shown as user not found. Let's use this is a not found error message. And on the else case, we'll just set the error under the find user by Dean for message error, message. Now let's go to the other component, HTML and build the find user by the volatile dialogue. So for this, we'll use the div MDB model hashtag. Go find user by the model. In the BIM model. Last model for left. So please recall that the find user by the model with the hashtag needs to match the viewer child element that we set up in the type script file style overflow, style. A, labeled by find user, by Ib model, a, hidden, true. And on the opened event. We'll invoke the clear data method to clear any existing data from the UI. Now for the div class modal dialog will use role document. Div class modal content will come to the header. And of course on the header will need button to click on it. And once we click on this button, we should hide this model. So bottom, bottom glass, close border, right. Adl labeled clothes. And on the click event, we just need to invoke the find user by the modal dot, hide, method. Span ADR. He'd done true. And we'll go with the x. Now for the modal title section when setup or descriptive title for our model. And we will go with find by ID. Something simple. We'll need to compute the modal body. So on the modal body, the first thing to insert this message that is exposed to if we have any informative message for the user. So if find user by the message plus col md 12, and we'll use the find the user ID for message reference. Let's clear this a bit. And we need to set in place a new row live class called MDG4, H5. Whereas the NDP badge default to true. And we need to use the ID since we want the user to insert the ID of the actual user that he wants to find the details about the class called NDA input and the B input of type text. And for the 2-way binding using NG model will binding to a dy d field class form control and the value should be ID. And now let's compute the modal footer, little button of type bottom, end DB, BD and of color primary. And class with slight area labeled. Let's go with fine. And for the click event, once we click on this button. We'll invoke the find user by the method. And of course, if we have any errors in the, any existing errors in this dialogue for the user by the message, we want to clear them out. So this is why I said, oh, find user via the message to Mt. And MDB waves effect. The fine though statement. Now button type button and dv, btn color secondary. The class should be a wave slight. For this button will hide the find user by the motto when we click on this button, of course. And let's go with the council string. Now this small dollar is in place. Let's fix this div indentation. So be careful with this dave sections to be sure that the developments contain the corresponding data and they are close the correct way. So at the end we should have four divs that reclose. And now in order to properly work with this model, we need to go on our cards. And for the find by ID card that's inserted the click event. And once we click on the Open button, will expose the find user by the model to the user. So let's test this, where I'll click on the Open. A farm by the model is shown not the number. A few don't insert a number. And if we select the one, you see that the user read idea reference one has been retrieved from the server and exposed in the UI. 12. Implement a filter process: I would like to add specific business logic now in terms of filtering data. So let's navigate to user component ds. So our type script file. And we should set up a specific variable. Let's call it the filter in place of type Boolean. And by default, it will be set to false. Now under Users table headers will add a new entry with a blank string. You will see at a later point, y added this basically for visual effects. So under find user by the, since we have filtered the data by d, will update the filtering plays variable and set it to true. Now, we should also add in place method that will basically reset the filter. So reset filter of type void will update the filter in place to false. And when this reset filter method is involved will also involved behind the scenes though, find all users API to update the existing table in the UI. Now, under user component HTML, you should take into the consideration this filtering option. And next to all the headers in the users table headers. We will use the filter in place variable, such as if this filter in place is set to true. We will add the class FA, FA sink, FA LG. So this a specific goal, font awesome, that we imported when we configure the angular structure of our application, the style will be coarser pointer and the color should be white. And when we click on this item, will invoke the reset filter method what that we previously created. If the filter in place is not set to true. So if this is false, we should also handle this case also. So scope core. And we basically don't do anything in this case. So let's see this filtering in place. We click on Find user by the dialogue. You see that currently we don't have any icon over there for filtering. So find user via the dialogue and find the user with the ID five. And you see here that we have this option to reset the filter now. And once we reset the filter, we are able to see all the data back in the table. So the UI is updated properly. Same thing if we test with four and so on. The filtering operation works properly. 13. Find By Criteria: Let's now build together, find user by criteria, specific business logic. So let's go on. There are constants class. Let's navigate to it and define a new value here. Or are silvered side API invocation. So public static, fine by great data of type string. And this should be computed from the constants. Users source plus search question mark. Criteria are equal. And we'll build this as part of the user service class. But for you to know, we need to add the criteria and also those search item. So let's move on. There are service class. And over here, we need to define a new method, find by criteria. And this would receive both the right data and also the sorts tried them. Both of type any and return on absorber wall of any. None of this method. We just need to invoke the return. This http.get constants fine by criteria and will concatenate the criteria percent searcher item equal and also the search item that we receive as pedometer. So in this way will actually invoke this brainbow fine by criteria API using this format. Now let's go on the Reserve Component type script file and define some variables that we'll use as part of the fine by grade Data API business logic. The fourth one will be the view child element, so that we'll be able to interact with the modal dialog from our HTML component inside our type script file. For the modal dialog will be called fine vibrate Data Model of type model directive. Let's also define informative message. Fine by criterion for message of type string variable called criteria and those so on called search item for the correct area array. So this will be composed of two values that we go compute our criteria based on. So this will contain the username, firstName, lastName agent country. So please recall that springboard server side requires one of these values. To compute our criteria based on on the clear data. We clear this criteria and for message. And let's do the same thing for the criteria and the search item elements. Now we are ready to create the new method. And let's call it fine by criteria of type void. And we'll need to add the criteria element from the HTML or site to the criteria value from the type script file. So for this, since we will have a list in the HTML element, we need to use the HTML select element document that getElementByID, great area, that value. You will see later on the HTML side why we need to use this approach. Retrieved the criteria. Now we check if the user actually set up values for the criteria and for the search item. And if not, we need to inform it by setting the Find By Criteria in for message with the already known mandatory fields error, message error and return. Now we need to set in place a special case for the criteria being set to age. So if the criteria was Set two H for the, for the invoking this method. And we don't have a number set for the search item. Well informed the user also that he did not set the number for the age of valued value. And if everything worked well, will involve the user surface fine by great area. Using both a great data and search item. Do the Subscribe and were received by US also field that we can iterate on. So the first thing is to clear the user, sorry. If you recall, the table in the UI. Iter is the username and clear it. And now we need to iterate over all the possible multiple users that we might receive by invoking the fine, by grade their API and add each one of them under the user, sorry, using the push method. And of course we have filtered data now. And let's set the filter in place to true. In case of any errors. Will first check if error status is 404. And if so defined by great Dalian for message, let's set up a specific value for it under the constants class. So public start Digg. User not found four criteria of type string. And no data found based on criteria should be the message. So going back to the script file, will use this new value. User not found four criteria or message. And if not, we'll just set the error. Now under the user component HTML as compute this dialogue for searching for users by criteria. So find users by grade Thalia div, MDB model hashtag. Find by great Delia model needs to match. High speed variable that we set up in the viewer child element. For this dialogue. Tab, index minus one. Not all should be dialogue style overflow minus i or outdoor area labeled by Find by criteria model area hidden, true. And on the o pond event. We will of course clear the data and existing data in the UI. Now div class modal dialog role document. Live less modal content. We're creating now the header. Let's make some space. For the header we need to set in place a button. Such as whenever we click on it. The Find By Criteria model will be closed. Area labeled clothes. And for the click event. Of course fine by criteria model that hide span, area hidden, true. And when the x sine x symbol h four plus four, the modal title. Let's set something specific to this dialog. So find by all criteria, NIF glass or the modal body, will lead to expose any alert message that might arise. Only if we have some data set on the Find By Criteria for message. They've class called the Twelve. Fine by criteria and for message. And now let's start building our row. Div class row Nicholas col, md for h5, MDB badge, default shrew. And let's add the criteria. Now for the second part of the row class, call an eighth. And we will now go with a specific element. So go with select less browser default columns, tom select name criteria, ID should be criteria. And for the option, we need to iterate on the type script element called the criteria are a and the value should be opt. So the user will be able to select only data from the criteria array that we set in place. If you recall from the Reserve Component type script file. And now you see why we use this specific statement to identify the criteria option that the user has selected. Now div class row, the first part of the row col md for. And they'd be badge default true. And now for the search item, second part of the row div class called m d eight, and will go the normal input type. For the 2-way binding will binding this to the search item class form control, and the value should be tried them. Now we need to create the footer of our Feinberg greater dialogue. Bottom button and the button color Brian Murray. Less waves like a real label. Find. And for the click event. When this button will be Click. If we have any. Andrew under Find By criterion for message where we're law. Clearly salt and also invoke the fine by criteria method that we wrote in the test script file. You see the metal here and give a wave so effect and the fire and statement. And let's implement also council bottom. Secondary for the color less, whereas light area labeled counsel. On the click event, we'll just hide this fine by criteria model. And the beer waves affect and affordable texts world go with council. Now we need to implemental way to actually open this dialog. So this Lalla will be open when we click on the Find user by criteria card. So for the click event of the Open button will just show the fine by period Thalia model. Everything should be in place now. So I click on the Find By criteria, you see that grey area as USA, Maine, firstName, lastName, agent country fields. So let's go with age. And we have for the sub-type them 24. And you see that we were able to extract to users that have the H sit 24. Another scenario, fine by criteria, contrary. And the search item MRC. And if we click on Find, we see that we are able to extract the user. And if we go with the age 50, actually H AAA, the error message is shown. And if we insert the correct age and user is retrieved. You can play, of course, with this functionality. 14. Support for editing and deleting: On this lesson, I would like to provide the initial support for editing and also deleting users. So in order to do this, we need to navigate to our users component dot HTML and scroll down a bit. Under our main table, we need to set. But DD tag with the class FA, FA minus edit, FA minus LG. So for this we will use the font awesome that we installed on the configuration process for our angular application. The style will be coarser with the pointer and the color will be set to green. And on the click event will have a method called Open update user model. And it will receive as a bare-metal the user. Let's close this. And in a similar fashion, let's do something for the delete or remove user. So I class FA, FA minus trash, FA minus RG. The style will be the same coarser pointer. And the colour should also be green. And for the click event, we will lose a method open DDT zone model. And the user will be also settles parameter. Now in the UI you see that we have two icons that simulate the edit and delete user operation. So let us go under User component ts and set up those two methods in place. So the first ten update user, model of type user. Let's use any and will be void. And the other method, open, delete user model of user any avoid. So we have these two methods in place. And let's add just an informative message to see that at least one of these methods is invoked. Let's click on delete. And you see that the user is shown in the logs. 15. Delete user mechanism: Under our next video, we'll set up the basic functionality for the delete user operation. So let's go back to our Visual Studio code and navigate to the constants class, where we will define a public static, delete user of type string. And this will be computed of constants dot user resource plus delete. And for our knowledge, we will need to also set up and actually send the ID of the user that we want to delete. Now let's go to our user service and defined a new method called delete user with the ID as parameter. And over here we will invoke this HTTP that delete operation for the constants delete user and will also propagate the ID of the user we want to delete once again under our type script file. Let's set up some specific variables for delete user operation. So we will have of your child of delete user model network map now delete user model in our UI. So this is a model directive specific child. And now under open delete user model, we can delete this statement. Invoke force the clear data to clear any possible existing data in the UI. This dot id will be equal to user dot id that we receive as parameter. And we will expose the delete user model graphical user interface to the user in the UI of course. We will also need the delete user method. And under this method, we will invoke the user service delete user with the ID that we previously set in the open delete user model. And if this operation has run with success, will first hide the modal in the UI. Add a descriptive or message to the user, such as user with the ID. This ID has been removed and will also invoke the final users API to update the existing table in the UI. If the operation fail for some reason. We will handle the error case. And we'll attach the error message to the main message. Now under user component HTML, we will need to define the delete user model. So let's do this. The NDP modal hashtag delete user model, MDB model, class, model. Left. And ID should be delete user model. Tab index minus one. Not all should be dialogue. Rel, labeled by the lead user model. Aria, hidden, true. And now we need to set up a modal dialog div with are all document. Of course, the modal content. We are sitting now, the modal header, text center for class. A modal title, font, weight, bold. And let's set up some specific message such as theirs or will be informed if he confidence that he wants to do more user with that specific IB. As for the bottom type, it shouldn't be done and the class should be close. Label clothes. And for the click event, we need to either delete user model. So now we will have that x button suggested when we click it, we should go hide this dialogue. This sample send times simulates an X button, actually an icon that we can click on to hide this delete user modal dialog. Now we need to compute, of course, the mortal body center. We need to create a row and col md 12 button type button. We will use the primary color. In-class waves light. We're creating basically OK button. So on the click event will invoke the delete user method that we previously set up under the type script file MDB waves effect and with an OK message. So once again, this delete user method is set up under the Directory File to invoke the DDD user method from the user service. Let's continue under the HTML file. Now we need to set in place a counseled bottom, bottom type button, MDB, color, secondary waves, light. Area, label should be Council. And on the click event. We'll just hide this delete user modal dialogue. We'll use the NDP waves effect. And for the button text, we should go with council. So files for compiled successfully. And let's click on a specific user to delete it. 150mm removal of user with the ID five. If we selected yes, you see that the user has been removed and also the table has been updated since we invoked the final users API. Now, let's hope or no, fine user by ID dialogue. And let's force the user, search for the user we tie E5, you see that it can't be found since it was removed. Now let's first for the one with ID six. I want to go back to the user component ts. And if we weren't able to find the user by ID, let's also closed-off find user by the model. So let's open the model. Search for ID six and you see that the model has been hidden. Now let's delete it. And you see the user with the ID six has been removed. But we should also hide this refresh button. Since data basically has been refreshed using the find all users API. So in order to do this, we should go to delete user method and set the filter in place variable to false, since we don't have any filtering in place. Once we involved or find all users method. As such for seven, the lead user. And you see that everything works now as expected also, the filtering has been already moved. 16. Update user full flow: In our next video, we will focus on implementing the update or AD user API. So let's go on. There are constants glass and define a new public static variable called update user of type string. And will be computed from the constants that user resource plus updates shrink. Now under user that services.js, we will need to compute our update user corresponding method. So this will receive a user as a parameter of type any. And we return an observable of any. And we need to invoke this dot HTTP dot put constants, update user. And we'll also send the user that we want to update to our server. Now under user component type script file, we need to set up some specific variables for our update user, business logic. So forth. Let's add the comment. And we will need your child for update user model. In this way, we will be able to interact with the modal dialogue in our UI. So this is of type model directive. And if you recall, we have the open update user model method. Or the first thing is to clear any existing data from the UI. And we need to populate all our fields from the user parameter we received in this method. So this dot id equals user ID. Same for the FirstName, same for the last name. This username equals user. That username. For the password, we don't want to expose the password in the UI since the password is already encoded and we don't want to see it, we don't want to send to the server. They encoded password already, since this password will be also encoded on the server side. And now we will need similar to the Delete user API or delete an actually an update user method. So this is somehow similar to the Delete user. So we'll compute the variable called user. And the id will be this dot id, the firstname, this dot, first name dot the length. If this is not equal to 0, will send this dot first name. If it's equal to 0. And we will send new. Same for the last name. It's not equal to 0 in terms of the length, will send it. If not, we'll populate the user lastName with nor. What we're doing here is creating a user object that will be sent to the server side using the user service update user method that we created earlier. Same for the username and password. In terms of the age, we need to check if the age, it's undefined or not. And for the country, it's a simple approach. We should check the length of it with 0 or not. And we should send this dot country variable, the server or the PNL statement. So now we have the user object in place that needs to be sent to the server in order to properly updated. So we will use this dot user service that update user method with a user object that we just created. And we will invoke the subscribe method. And if the operations succeed, we're forced hide news, update user modal, dialog, and set up an informative message to the user. But for this, let's go to the constants class. And define a new message. Saw update the user. Info message. User has been updated. So this that main message equals constant updated user info message. And we also need to involve the final users method to update the existing table from the UI and remove any existing, any existing filtering operation in the UI. The user service not update user was not executed with success. When you specify a string variable that we need to update here. So let's go back and set up updated user informed message of type string. Let's also handle the case to clear the data. Okay? And let's go back. And if the operation was not executed with success, we will update the, update the user info message with the error message that we receive from the server. Now, we need to compute the HTML bark or our update user or operation. So we need to create a model for this div and DB model hashtag go update user model. Since you recall that the child in the type script file is named update user model and should match this hashtag. The role dialogue. For the style we need to set over rho minus psi auto LDL labeled by update user modal area hidden, true, div class modal dialog, or all document. We are creating now the modal content for our dialogue. Now for the model header will set in place a button. Class clothes. Or right. Now for the message that will wish shown are labeled clothes. And on the click event is important to invoke dot date user model height so that we can hide the dialog if we press, if we press on this x bottom from our dialogue, also set in place the span. And now let's compute the modal title, id update user model. And let's add the descriptive message for this. Now for the modal body or for the log, will need to first set in place the informative message in case of herding errors that might appear. Yolo invoking update user API. So if we have any informative message under the update user informed message, these are left will be shown to the user. Now we will compute the actual content or far model. Since we set in place that date UserInfo message over here. So div class row. And we'll split this rho into col md for H5 will use also the NDP badge default true to make some visual effects. The first thing to note is that we set in place the firstname. Now let's use coal AND eight. For the remaining part of this row. And we'll use the input tag with MDB input of type text, of course for does the firstname will use the two-way binding for the FirstName, such as when the user will update the firstName is variable will also be stored in the type script file automatically. And also shown in the UI of course, class form control. And the value is the firstName. So now we've finished with first the important role from our modal dialog. We're moving to the next row, div class colon before of course, MDB badge default, true. And let's set in place the lastname. Now for the second part of the row div class called the eight. And the same thing as we use for the firstname. We'll set in place the input tag, the NG model. This length for the lastName field. Moving now to the third and important role in our update user model. Div class row. We are splitting this row once again into sections. And dv batch default true. Now we set in place the username input in the B input of type text. And for the 2-way binding using NG model will bind this to the username field, and no value should be Username. Now we need to compute the row that corresponds to the password. So div class, row, div class core. And the four. For the password, the corresponding badge. So we should type in password. Now, the class colon, the minus eight. Over here, you can see that the 2-way binding is made for the password field and it is of type password. Now we need to focus on the fifth row in our dialogue. Ndp patch default, true. We'll set the configuration for the age class called MDA. Let's close this div. And the B input type text NG model should be mapped to the H field. And clash would be form control. Of course, the value should we age. And we should update and fix this synsets the input, okay? And Cong, file the source code. And now for the last row c, this error update user info message. Okay, we need to fix this. Let's take a look on there are user component ts and do a quick search. It is not found. But let's try to fix this. So you can see that it was updated UserInfo message. What we fix this by your changing it to update user info message. And over here, okay, now the code should compile correctly. Okay, so let's move forward with our final row in this dialogue. So div class called MDG4. We need to set up the badge for the country in this case. So MDB badge default true. So div class called m d eight. And now this is an simple input type of text and NG model should map to the country filled. Class should be formed control. And the value should be of course, country. Now we finish with this body div. And we need to set in place modal footer of hard dialogue. This will consist of two main buttons. So for the, for the first button will compute the bottom type button, color primary. The usual class waves light. And for area label will be saved. And for the click event. If you recall that we set in place this update user method in our type script file for the text will be update. So once again, update user. Under this update user will compute the user object and send it to the update user method from the user service. And after this, the business logic from our springboard app will be invoked to update the corresponding user. And of course this will be saved automatically into the database, MySQL database. Now for the second button, we'll use a button for council process. And on a click event. We just need to hide this update user modal dialog and TV waves effect. And for the texts we will use council. So far so good. Now let's see things in action. So I selected the first user. You see that text is automatically populated unless we accept the password. And you see that we made some changes and the firstname, for example, has been updated with success. Now for the password, the password, the if we updated, it will be encrypted on the server side. That's also update the country and also update the username to see free changes in place. So you see the password has been updated and encoded. Also the other two fields. Now really more, someone, some entries. And you see that the first name has been updated and no changes were made to the username.