Trang chủ » Blog » CRUD trong Angular với 2 bảng (Phần 2)

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

bởi CodeGym | 06/12/2023 17:30 | Blog

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

CRUD trong Angular Phần 2

  • 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

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

7 + 3 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM