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