CRUD trong Angular với 2 bảng (Phần 2)

Xem lại phần 1 tại đây: https://codegym.vn/blog/2020/05/04/crud-trong-angular-voi-2-bang-phan-1/

• list-product.component.ts
• import { Component, OnInit } from ‘@angular/core’;
  import {Product} from ‘../../model/product’;
  import {ProductService} from ‘../../service/product.service’;

@Component({
  selector: ‘app-list-product’,
  templateUrl: ‘./list-product.component.html’,
  styleUrls: [‘./list-product.component.css’]
})
export class ListProductComponent implements OnInit {
  productList: Product[] = [];

  constructor(private productService: ProductService) {
  }

  ngOnInit() {
    this.getProductList();
  }

  getProductList() {
    this.productService.listProduct().subscribe(result => {
      this.productList = result;
    });
  }
}

• list-product.component.html

<div class=”text-center text-uppercase font-weight-bold”>
  <span style=”font-size: 24px”>Danh sách sản phẩm</span>
</div>
<router-outlet></router-outlet>
<div class=”mt-lg-4″>
  <a routerLink=”/create-product”>Tạo mới sản phẩm</a>
</div>
<div class=”mt-lg-4″>
  <table class=”table table-bordered”>
    <tr>
      <th>Tên sản phẩm</th>
      <th>Edit</th>
      <th>Delete</th>
    </tr>
    <tr *ngFor=”let product of productList”>
      <td>{{product.name}}</td>
      <td><a [routerLink]=”[‘edit-product’,product.id]”>Edit</a></td>
      <td><a [routerLink]=”[‘delete-product’,product.id]”>Delete</a></td>
    </tr>
  </table>
</div>

• Và chúng ta sẽ thấy rằng có 1 sản phẩm vừa tạo trong danh sách

• update-product.component.ts
• import { Component, OnInit } from ‘@angular/core’;
  import {FormControl, FormGroup} from ‘@angular/forms’;
  import {ProductService} from ‘../../service/product.service’;
  import {Product} from ‘../../model/product’;
  import {Category} from ‘../../model/category’;
  import {ActivatedRoute, ParamMap} from ‘@angular/router’;
  import {Subscription} from ‘rxjs’;
  import {CategoryService} from ‘../../service/category.service’;

@Component({
  selector: ‘app-update-product’,
  templateUrl: ‘./update-product.component.html’,
  styleUrls: [‘./update-product.component.css’]
})
export class UpdateProductComponent implements OnInit {
  productForm: FormGroup = new FormGroup({
    name: new FormControl(”),
    category: new FormControl(”)
  });
  currentProduct: Product;
  categoryList: Category[] = [];
  sub: Subscription;

  constructor(private productService: ProductService,
              private activatedRoute: ActivatedRoute,
              private categoryService: CategoryService) {
  }

  ngOnInit() {
    this.getCategories();
  }

  updateProduct() {
    this.sub = this.activatedRoute.paramMap.subscribe((paramMap: ParamMap) => {
      const id = +paramMap.get(‘id’);
      this.productService.getProduct(id).subscribe(result => {
        this.currentProduct = result;
        const product: Product = {
          name: this.productForm.value.name,
          category: {
            id: this.productForm.value.category
          }
        };
        this.productService.updateProduct(id, product).subscribe(() => {
          alert(‘success’);
          this.productForm.reset();
        }, () => {
        });
      });
    });
  }


  getCategories() {
    this.categoryService.listCategory().subscribe((result) => {
      this.categoryList = result;
    });
  }
}

• update-product.component.html

<div class=”text-center”>
  <h2>Tạo mới sản phẩm</h2>
</div>
<form [formGroup]=”productForm” (ngSubmit)=”updateProduct()”>
  <label class=”col”>
    Tên sản phẩm:
    <input type=”text” formControlName=”name” class=”form-control”>
  </label>
  <label class=”col”>
    <label for=”category”>Danh mục:</label>
    <select class=”custom-select custom-select-sm” id=”category” formControlName=”category”>
      <option [ngValue]=”null” disabled>Chọn danh mục sản phẩm</option>
      <option *ngFor=”let category of categoryList” [value]=”category.id”>{{category.name}}</option>
    </select>
  </label>
  <div class=”col”>
    <button class=”btn btn-info” type=”submit”>Tạo mới</button>
  </div>
</form>

• Kết quả sau khi update thành công

• delete-product.component.ts
• import {Component, OnInit} from ‘@angular/core’;
  import {ProductService} from ‘../../service/product.service’;
  import {Product} from ‘../../model/product’;
  import {Subscription} from ‘rxjs’;
  import {ActivatedRoute, ParamMap} from ‘@angular/router’;

@Component({
  selector: ‘app-delete-product’,
  templateUrl: ‘./delete-product.component.html’,
  styleUrls: [‘./delete-product.component.css’]
})
export class DeleteProductComponent implements OnInit {
  currentProduct: Product;
  sub: Subscription;

  constructor(private productService: ProductService,
              private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
    this.sub = this.activatedRoute.paramMap.subscribe((paramMap: ParamMap) => {
      const id = +paramMap.get(‘id’);
      this.productService.getProduct(id).subscribe(result => {
        this.currentProduct = result;
      });
    });
  }

  deleteProduct() {
    this.sub = this.activatedRoute.paramMap.subscribe((paramMap: ParamMap) => {
      const id = +paramMap.get(‘id’);
      this.productService.deleteProduct(id).subscribe(() => {
        alert(‘success’);
      });
    });
  }
}

• delete-product.component.html

<div class=”text-center”>
  <h2>Bạn có muốn xóa không ?</h2>
</div>

<label class=”col”>
  Tên sản phẩm:
  <span>{{currentProduct.name}}</span>
</label>
<div class=”col”>
  <button class=”btn btn-info” type=”submit” (click)=”deleteProduct()”>Delete</button>
</div>

• Giao diện sau khi xóa thành công

Author: Nguyễn Minh Quân

Đăng ký nhận bộ tài liệu kỹ năng dành cho lập trình viên (video hướng dẫn + slide) tại đây

Tìm hiểu thêm về mô hình Coding Bootcamp tại đây