Hiện loại sản phẩm dùng Angular

Hiện loại sản phẩm dùng Angular hướng dẫn cách tạo component và nhúng vào layout. Sau đó lấy dữ liệu từ server (các loại sản phẩm) để hiện ra.

Yêu cầu

  1. Hiện danh sách các loại sản phẩm trong layout
  2. Trước khi thực hiện bài này, hãy xem và thực hiện theo bài viết sau
    https://longnv.name.vn/thuc-tap-angular/hien-san-pham-moi-dung-angular

Chuẩn bị thực hiện

  1. Chạy project Angular : Vào folder project và chạy lệnh sau
     ng serve -o 
  2. Chạy Json server: Vào folder project và chạy lệnh 
    json-server -w db.json

Tạo component loại sản phẩm

Trong folder project chạy lệnh ng g c CacLoai

Nhúng vào component cha

Để có thể thấy component trong layout theo yêu cầu. Nghĩa là component sẽ hiện ra trong mọi chức năng của website. Bạn mở file app.component.html để code . Giờ sẽ hiện nó trong tag aside nhé. Code như sau:

Test để xem thử sẽ thấy component hiện ra trong cột phải (tag aside)

Tạo hàm trong service để request dữ liệu từ server

Để có dữ liệu mà trình bày thì chạy lên server lấy thôi. Chúng ta sẽ định nghĩa hàm trong service dữ liệu nhé.

Mở file du-lieu.sertvice.ts , định nghĩa hàm getListLoaiSP như sau:

Gọi hàm trong trong servive từ component

Giờ thì gọi getListLoaiSP() hàm từ trong component . Mở file cac-loai.component.ts và code như sau: 

//cac-loai.component.ts
import { Component } from '@angular/core';
import { DuLieuService } from '../du-lieu.service';
import { ILoaisp } from '../iloaisp';
@Component({ selector: 'app-cac-loai',
  templateUrl: './cac-loai.component.html',
  styleUrls: ['./cac-loai.component.css']
})
export class CacLoaiComponent {
  constructor(private d:DuLieuService) { }
  listLoaiSP:ILoaisp[] = [];
  ngOnInit(): void {
    this.d.getListLoaiSP().subscribe( d => this.listLoaiSP = d);
  }
}

Trình bày dữ liệu trong view

Giờ thì hiện loại sản phẩm dùng Angular được rồi. Chúng ta sẽ dùng list-group của bootstrap 5: https://getbootstrap.com/docs/5.3/components/list-group/  để hiện thông tin.

Mở file cac-loai.component.html và code

<!-- cac-loai.component.html -->
<ul class="list-group">
    <li class="list-group-item py-2" *ngFor="let loai of listLoaiSP">
      <a href="#"> {{loai.tenLoai | uppercase }}</a>
    </li>
</ul>

Xem thử kết quả xem sau:

Bạn thực hiện định dạng thêm cho đẹp nhé, code css trong file cac-loai.component.css

Để hiện compoment nào đó ra layout trong mọi chức năng của website, bạn thực hiện tương tự bài này: Tạo compoment + nhúng vào app componnent + viết hàm để lấy dữ liệu từ server (nếu cần) rồi hiện dữ liệu trong component mới tạo là xong.

Tài liệu chính thức Angular : https://angular.io/docs bạn xem thêm nếu cần nhé.

Sau đây là các bài trong seris thực tập Angular bạn cần thực hiện tuần tự từ trên xuống để có project nhé:

  1. Đôi điều về Angular – P1
  2. Đôi điều về Angular – P2
  3. Hiện sản phẩm bán chạy
  4. Hiện sản phẩm mới dùng Angular
  5. Hiện loại sản phẩm dùng Angular
  6. Hiện sản phẩm theo loại dùng Angular
  7. Hiện chi tiết sản phẩm dùng Angular

BÀI VIẾT LIÊN QUANXEM THÊM