[Angular #2] Tạo Component và hiển thị danh sách sản phẩm

Trong phần này, chúng ta sẽ tìm hiểu cách tạo Angular Component với Angular CLI và áp dụng Angular Material để làm giao diện UI hiển thị danh sách sản phẩm.

Danh sách sản phẩm trong Shopping Cart

Nếu bạn chưa xem phần 1 thì hãy bấm vào bài viết này Bắt đầu một dự án với Angular để cài đặt các công cụ cần thiết nhé.

Nội dung bài viết

  • Tạo Component tùy biến.
  • Truyền được dữ liệu vào Component.
  • Giao tiếp được giữa các Component.
  • Sử dụng được Material.

Tạo Component tùy biến

Bước 1: Mở project shopping-cart đã tạo ở bài trước bằng code editor hoặc IDE mà bạn ưa thích.

Bước 2: Mở giao diện Terminal/CMD trỏ đến đúng thư mục gốc hoặc thư mục con mà bạn mong muốn đặt component ở đó. Sau đó chạy dòng lệnh sau để tạo mới một component trong project và đặt tên là product-list.

ng generate component product-list

Giao diện Termial tạo Component bằng Angular CLI
Giao diện Termial trong Visual Studio Code tạo Component bằng Angular CLI

Câu lệnh trên sẽ tạo ra thư mục mới có tên là product-list nằm trong thư mục src/app; có 4 file được tạo ra bao gồm:

  • product-list.component.css – Chứa các mã CSS của riêng component.
  • product-list.component.html – Chứa các mã HTML.
  • product-list.component.spec.ts – Chứa code TypeScript để chạy Test.
  • product-list.component.ts – Chứa code TypeScript.

Phần code trong file product-list.component.ts như sau:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Dòng lệnh sau để import decorator Component từ thư viện @angular/core.

import { Component, OnInit } from '@angular/core';

Annotation @Component để chị định đây là một lớp Component trong Angular và định nghĩa các Metadata.

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})

Khởi tạo class ProductListComponent trong TypeScript.

export class ProductListComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

}

ngOnInit() là một lifecycle hook. Angular gọi ngOnInit() ngay sau khi tạo một Component.

Luôn đặt export để bạn có thể import lớp này ở những lớp khác chẵng hạn như trong lớp AppModule.

Cuối cùng, Angular CLI sẽ tự động import Component class bạn vừa tạo vào trong lớp AppModule để Angular có thể quản lý chúng:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProductListComponent } from './product-list/product-list.component';

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Để sử dụng component vừa tạo, bạn hãy mở file app.component.html nằm trong thư mục src/app. Xóa toàn bộ code bên trong file này và thay thế bằng tên selector:

<app-product-list></app-product-list>

Sau đó mở Terminal/CMD và chạy lệnh:

ng serve --open

Kết quả đạt được.

Giao diện hiển thị component product-list

Còn tiếp…

Mình là Nguyễn Bá Tuấn Anh. Một nhà phát triển web sống ở Hà Nội, Việt Nam

1 comments On [Angular #2] Tạo Component và hiển thị danh sách sản phẩm

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

Facebook