Angular và TypeScript: Tạo component

Trước khi đọc bài này, bạn cần phải đọc và làm theo hướng dẫn trong bài Cài đặt và chạy ứng dụng demo. Bởi vì chúng ta sẽ sử dụng ứng dụng demo trong bài đó để viết component.



Sau khi tải ứng dụng demo xong, bây giờ các bạn vào thư mục helloworld\app và tìm file app.component.ts, đây là file chứa component và chúng ta sẽ sửa lại file này. Hãy mở nó lên bằng IDE của các bạn và bắt đầu.

Template


Trong cấu hình template hiện tại của component đang là `Hello {{name}}`, bây giờ các bạn sửa lại như sau:



Template này sẽ dùng một vòng "for" để in ra tất cả phần tử có trong biến friend.

Styles


Tiếp theo đến cấu hình styles, các bạn cấu hình theo mẫu css sau:



Khi chạy styles này sẽ được ném vào header của web, nhưng chỉ có tác dụng với template trong component này thôi nên sẽ không ảnh hưởng đến styles của toàn bộ web.

Lập trình component


Vậy thôi là xong phần cấu hình, bây giờ đi vào phần code chính. Code như sau:



Biến componentName sẽ được đưa vào{{componentName}}của template, còn biến friends sẽ đưa vào for

Kết quả


Kết quả chương trình sẽ chạy như sau, cảm ơn các bạn đã đọc bài.



0 nhận xét:

Đăng nhận xét