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

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>