Hướng dẫn thêm component con vào component cha trong Angular

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người cách thêm component con là như thế nào? Trong bài viết hôm nay chúng ta sẽ sử dụng Angular Cli để tạo ra component.

1. Component là gì

Trong angular các component được sắp xếp theo kiến trúc component-base, nghĩa là mỗi component sẽ phụ trách một nhiệm vụ cụ thể. Ví dụ ta có nhiệm vụ là login, đăng ký, mua hàng, thì ta tạo ra 3 components mỗi component sẽ có một template html, class component và css riêng. Kiến trúc các component trong Angular giống như kiến trúc 1 cái cây. Gồm có cha, sau đó xuống con, xuống cháu.

2. Cú pháp tạo Component

Chúng ta sử dụng cú pháp sau của Angular Cli để tạo ra component.

1
ng new childComponent

3. Thêm Component con

Để thêm 1 component con vào một component cha chúng ta thực hiện các bước sau. Trong ví dụ này ta sẽ tạo ra một component là khách hàng.

Chúng ta tạo file model định nghĩa cấu trúc dữ liệu về một khách hàng. Đối tượng này sẽ được sử dụng trong file Class Component.

1
2
3
4
5
6
7
8
9
10
export class Customer {
 
  customerNo: number;
  name:string ;
  address:string;
  city:string;
  state:string;
  country:string;
 
}

Chúng ta sử dụng từ khoá export để các component khác có thể sử dụng được class component khách hàng của chúng ta. Nếu không có Angular sẽ báo lỗi khi sử dụng component khách hàng.

Sau khi chạy câu lệnh ng new Customer bằng Angular Cli. Nó sẽ tạo cho ta 1 folder tên customer ở dưới folder app. Trong folder này có các file để cấu hình 1 component. Chúng ta sẽ cấu hình theo từng bước như sau:

• Bước 1 : Chỉnh sửa file customer.component.ts. Đây là file class component chứa data Customer ở trên. Chúng ta tạo sẵn 5 khách hàng.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component } from '@angular/core';
import { Customer } from './customer';
 
@Component({
  selector: 'customer-list',
  templateUrl: './customer-list.component.html'
})
export class CustomerListComponent
{
  customers: Customer[] = [
 
    {customerNo: 1, name: 'Rahuld Dravid', address: '', city: 'Bangalore', state: 'Karnataka', country: 'India'},
    {customerNo: 2, name: 'Sachin Tendulkar', address: '', city: 'Mumbai', state: 'Maharashtra', country: 'India'},
    {customerNo: 3, name: 'Saurrav Ganguly', address: '', city: 'Kolkata', state: 'West Bengal', country: 'India'},
    {customerNo: 4, name: 'Mahendra Singh Dhoni', address: '', city: 'Ranchi', state: 'Bihar', country: 'India'},
    {customerNo: 5, name: 'Virat Kohli', address: '', city: 'Delhi', state: 'Delhi', country: 'India'},
 
  ]
}

Đầu tiền chúng ta import các module cần thiết của angular và import thêm model customer vào để sử dụng.

1
2
import { Component } from '@angular/core';
import { Customer } from './customer'; 

Tiếp đến chúng ta thêm meta data là @Component cho class component. Chúng ta mô tả các thành phần trong @Component như selector tên gì, tìm kiếm file html template ở đâu.

1
2
3
4
@Component({
  selector: 'customer-list',
  templateUrl: './customer.component.html'
})

• Bước 2 : Tạo file template html(view) để hiển thị kết quả. file này ta có tên giống như tên trong templateUrl là customer.component.html. Chúng ta sẽ hiển thị danh sách 5 khách hàng.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<h2>List of Customers</h2>
 
<table class='table'>
  <thead>
    <tr>
      <th>No</th>
      <th>Name</th>
      <th>Address</th>
      <th>City</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let customer of customers;">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

• Bước 3 : Như vậy component khách hàng chúng ta đã sẵn sàng. Chúng ta cần phải khai báo nó trong app.module.ts để sử dụng.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 
import { AppComponent } from './app.component';
import {CustomerComponent} from './customer-list.component';
 
@NgModule({
  declarations: [
    AppComponent, CustomerComponent
  ],
  imports: [
    BrowserModule,NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Đầu tiên chúng ta import Customer component vào.

1
import {CustomerComponent} from './customer-list.component';

Sau đó khai báo nó trong Angular module.

1
2
3
4
@NgModule({
declarations: [
   AppComponent, CustomerListComponent
]

• Bước 4 : Nhúng component khách hàng vào component cha. Anh ví dụ mình có component cha là app.component.html giờ ta muốn nhúng component khách hàng vào trong component cha là app component ta làm như sau:

1
2
3
<h1>Danh sách khách hàng </h1>
 
<customer-list></customer-list>

• Trong file app.component.html ta sử dụng thẻ . Cái này ta định nghĩa ở thẻ selector trong component class mà ta làm ở bước 1.

1
2
3
4
@Component({
  selector: 'customer-list',
  templateUrl: './customer.component.html'
})

4. Demo Video

Play

5. Source code

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments