Mục tiêu

Ứng dụng gallery- Nắm bắt được về các thao tác với NgModule và DI trong Angular.

Mô tả- Ứng dụng gallery

Ứng dụng gallery

Hướng dẫn

Bước 1: Khởi tạo project với Angular CLI (nếu đã có project thì có thể bỏ qua)

Các bạn chạy lệnh npm i typescript@2.9.2 -D để cài đặt thư viện typescript nếu phiên bản hiện tại < 2.9.2

Bước 2: Khởi tạo một NgModule tên là image-gallery, và 2 component tên là image-card, image-gallery

ng g m image-gallery

ng g c image-gallery

ng g c image-gallery/image-card

Bước 3: Thay phần template của component vừa tạo bằng đoạn code sau:

image-gallery.component.html:

image-card.component.html:

Bước 4: Code phần logic cho component

image-gallery.component.ts:

image-card.component.ts:

Bước 5: Thêm style cho các component vừa tạo:

image-gallery.component.scss:

image-card.component.scss:

Bước 6: Thêm vào image-gallery.module.ts:

Bước 7: Thêm vào app.component.html

Bước 8: Thêm vào app.module.ts

Bước 9: Kiểm tra kết quả hiển thị trên trình duyệt

ứng dụng gallery

Bước 10: Thêm mới file src/app/image-gallery/token.ts

Bước 11: Update src/app/image-gallery/image-gallery.component.ts

Bước 12: Update src/app/image-gallery/image-gallery.component.html

Bước 13: Update src/app/image-gallery/image-gallery.component.scss

Bước 14: Thêm vào app.module.ts

Bước 15: Kiểm tra kết quả.

Do chúng ta đã có config một token ở AppModule, nên lúc này gallery chỉ hiển thị 2 phần tử 1 hàng.

Mã nguồn tham khảo: https://github.com/codegym-vn/angular-training/tree/master/ngmodule-dependency-injection/src/app

Trên đây CodeGym đã cùng với bạn luyện tập về component data binding trong Angular. Hãy chụp ảnh màn hình và nộp bài thực hành của bạn trên CodeGymX để cùng nhau luyện tập nhé!