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

“Đã biết hết rồi” hay biểu hiện của “căn bệnh” mang tên “Không học được gì”

Những “tin đồn” khi chuyển nghề lập trình có thể bạn chưa biết – CodeGym

Danh sách 10 khóa học NodeJS Online