Angular with Java

  In Previous topic we have looked in Delete Functionality and integrated both UI and JAVA and on click of Delete button we showing message in header if it is success. In this topic we will work on update functionality, let's start and update our code as below : First we have to update our todos-list.component.html and add a column for update, we will remove action column and change it to update and delete columns. Your page will look as below: Now we have to create a updateTodo method in todos-list.component.ts file and from this method we want to open a new page where we update the details. so for opening a new page we have create a component so create a component with ng generate component todo as shown below  If you remember from some of the starting topic we have added new component to app-routing.module.ts file. we have to do this because we are routing to another page when we click on update button. Now create updateTodo method which will route to the edit page so for routi

From this topic we will update our angular todoList Application with Restful API's. Let's start with our welcome page and add a button, on clicking of that button we will call our webservice. Angular provide us HTTP client module which we are going to use using observable. Before starting make sure you java and angular application is started. Now go to your welcome.component.html to add a button as show below After adding button you have to add getWelcomeMessage() method in your welcome.commponent.ts file and print something for now in console. now if check from your localhost you can see it will print in the console Now we will connect the java service for that let's create a service in angular which will connect to backend java service, for creating a service we will command ng generate service service/data/welcomeData. Now create a method in welcome-data.service.ts file you have to use this service in your welcome component by using dependency injection and update your g

  In this topic we will create our logout component for our application and also remove session object if user is logged out as well we will see the use of Angular Router method CanActivate. Now Let's create logout component using command "ng generate component logout"  once you create the logout component you have to add it in routing file i.e. app-routing.module.ts and add it before ** as ** will be the last thing in routing. After adding it here you can check it by clicking on logout button in your localhost URL. Now we will remove user from session storage for that we need to add one method in authentication service and use that method in logout component by dependency Injection. Till Now we have done the login, menu, error, logout so you can check it by going through localhost. but still we have one problem i.e. if we go to http://localhost:4200/welcome/dummy or todo or any menu item without logged in it is working so what do we need to do here? we need something whi

In this topic we will create our authentication service, use session storage and we will enable menu links based on user authentication. Let's create a service by using command "ng generate service foldername/servicefilename", always create services in a folder otherwise it will create everything in src folder and it is very difficult to track it. Now create our authentication service so the command will be "ng generate service service/hardcodedAuthentication", make sure you are in the project folder when you use the command. as shown below When you open this service file you can see it is a simple class except @Injectable,  it make this class as service and we can use this at any place of or project by importing it. Injectable make a class available for dependency injection Now add some method in this class. Now we use this Authentication service in our login component, for using this we have to add this in constructor  and now as we move the authentication par

In Previous topic we have learned angular modules and bootstrap. In this topic we will create menu and footer component for our todoList application and add some bootstrap css in it. So let's create our menu and footer component by using command "ng generate component menu",  "ng generate component header"   and "ng generate component footer" using command prompt at your project location as below: once these component are created add some hardcoded value in html files for all and then you have to add the tag name for header, menu and footer component in root component i.e. app.component.html as below and refresh your localhost. Menu Component: Now we will look into Menu Component and some link for login, logout, todos and other. For this we need to update our menu.component.html file as below, we will use router link for routing from one page to another and href for external URL. Header Component: target="_blank" will open the link in new tab