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.

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

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.

Còn tiếp…