E-commerce Website - Online Book Store - Create User Admin Module - Part 3
Ecommerce Website - Online Book Store using Angular 8 + Spring Boot
Ecommerce Website - Online Book Store using Angular 8 + Spring Boot Introduction Ecommerce Website - Online Book Store - Create Menu Module Ecommerce Website - Online Book Store - Create User Admin Module - Part 1 Ecommerce Website - Online Book Store - Create User Admin Module - Part 2 Ecommerce Website - Online Book Store - Create User Admin Module - Part 3 Ecommerce Website - Online Book Store - Create Book Admin Module - Part 1 Ecommerce Website - Online Book Store - Create Book Admin Module - Part 2 Ecommerce Website - Online Book Store - Create Book Admin Module - Part 3 Ecommerce Website - Online Book Store - Create Book Admin Module - Part 4 Ecommerce Website - Online Book Store - Create Book Shopping Module
Video
This tutorial is explained in the below Youtube Video.Spring Boot Application
We will be modifying the Spring Boot Application we had created in the previous tutorial. In the controller class add a method for deleting the User.package com.javainuse.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import com.javainuse.db.UserRepository; import com.javainuse.model.User; @RestController @CrossOrigin(origins = "http://localhost:4200") @RequestMapping(path = "users") public class UserController { @Autowired private UserRepository userRepository; @GetMapping("/get") public List<User> getUsers() { return userRepository.findAll(); } @PostMapping("/add") public void createUser(@RequestBody User user) { userRepository.save(user); } @DeleteMapping(path = { "/{id}" }) public User deleteUser(@PathVariable("id") long id) { User user = userRepository.getOne(id); userRepository.deleteById(id); return user; } }
Angular Code
The page Structure for the User-Admin Page is as follows-The Users Component will be having two child components - Add User Component and View User Component.
In this tutorial we will be implementing the view/delete user component. Create a new component named view user.
ng generate component admin/users/viewuser
We have already added the show details button in the user component. On this click the view user component should be called along with the user details displayed. So whenever we will load the users component we will also be checking the url component
- if the url has action=add then the adduser page will be displayed.
- If the url has the action=view then the view user page will be displayed.
- if no action parameter is present then neither the add user page or the view user page will be displayed.
-
In the constructor add the activatedRoute and router.
- ActivatedRoute - Gives us access to the current route instance.
- Router - using this we can navigate to another page.
- In the ngOnInit function we will be using the ActivatedRoute to check id the url contains any id. If it contains the id it means we have to show the view page for the selected user.
- Implement the viewUser function. In this function using the Router we will be again navigating to the same page - /admin/users, but with additional parameters of action=view and the id of the selected user.
import { Component, OnInit } from '@angular/core'; import { User } from '../../model/User'; import { HttpClientService } from '../../service/http-client.service'; import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'app-users', templateUrl: './users.component.html', styleUrls: ['./users.component.css'] }) export class UsersComponent implements OnInit { users: Array<User>; selectedUser: User; action: string; constructor(private httpClientService: HttpClientService, private router: Router, private activatedRoute: ActivatedRoute) { } ngOnInit() { this.refreshData(); } refreshData() { this.httpClientService.getUsers().subscribe( response => this.handleSuccessfulResponse(response), ); this.activatedRoute.queryParams.subscribe( (params) => { this.action = params['action']; const selectedUserId = params['id']; if (selectedUserId) { this.selectedUser = this.users.find(user => user.id === +selectedUserId); } } ); } handleSuccessfulResponse(response) { this.users = response; } viewUser(id: number) { this.router.navigate(['admin','users'], {queryParams : {id, action: 'view'}}); } addUser() { this.selectedUser = new User(); this.router.navigate(['admin', 'users'], { queryParams: { action: 'add' } }); } }
<h1>Users Admin</h1> <a class="btn btn-primary mb-3" (click)="addUser()">add</a> <div class="container row"> <div class="col-md-6"> <table class="table"> <thead> <tr> <th>ID</th> <th>Name</th> <th></th> </tr> </thead> <tbody> <tr *ngFor="let user of users"> <td>{{user.id}}</td> <td>{{user.name}}</td> <td><button type="button" class="btn btn-primary" (click)="viewUser(user.id)">Show Details</button></td> </tr> </tbody> </table> </div> <div class="col-md-6"> <app-adduser *ngIf="action === 'add'" [user]="selectedUser" (userAddedEvent)="refreshData()"></app-adduser> <app-viewuser *ngIf="action === 'view'" [user]="selectedUser"></app-viewuser> </div> </div>