Bài thực hành số 2

Yêu cầu:
- Sử dụng HTML, CSS để thiết kế trang web
- Tạo và sử dụng Component trong ứng dụng Angular
- Liên kết dữ liệu trong Angular
Nội dung thực hành:
Bài 1: Tạo project stock-market với các component sau:
Tạo component có tên Login có thiết kế tương tự như sau:

Bài 2: Xây dựng ứng dụng Giao dịch chứng khoán có giao diện đơn giản như hình
bên dưới
Các bước thực hiện:
1. Tạo mới một component trong ứng dụng stock-market có chức năng hiển thị thông
tin của một cổ phiếu lên màn hình. Như vậy chúng ta sẽ tạo mới component và
code cho các file .ts, .css, .html như sau
+ Tạo mới component: ng generate component stock/stock-item
+ Code cho tp tin stock-item.component.ts:
 + Thiết kế trang stock-item.component.html để hiển thị thông tin

Có thể viết lại như sau:

+ Một số định dạng dữ liệu trên file stock-item.component.css

2. Thêm thuộc tính để thay đổi màu cho giá cổ phiếu trong trường hợp giá hiện tại
lớn hơn giá trước đó và ngược lại.
+ Tập tin stock-item.component.ts
 + Tương tự như vậy thì file css và file html sẽ được chỉnh sửa như hình sau
.css .html

3. Thêm nút lên “Add to Favorite” để thực hiện chức năng liên kết dữ liệu dưới dạng
sự kiện, khi người dùng chọn nút lệnh này thì thay đổi trạng thái của nút lệnh như
hình sau

+ Như vậy chúng ta sẽ thêm một thuộc tính để ghi nhận trạng thái cổ phiếu đó có
được yêu thích không
+ Các tập tin tương ứng sẽ thay đổi như sau
4. Tổ chức lại ứng dụng trên bằng cách sử dụng Model để lưu trữ thông tin của cổ
phiếu
+ Tạo một class để mô tả thông tin của cổ phiếu: ng generate class
model/stock
+ Khi đó các lớp sẽ thay đổi lại như sau

+ File stock-item.component.html