[Thực hành] Ứng dụng Progress Bar- Codegym.vn

Mục tiêu

Ứng dụng Progress Bar- Nắm bắt được về các thao tác với component trong Angular.

Mô tả- Ứng dụng Progress Bar

Tạo ứng dụng ProgressBar để hiển thị cho người dùng được biết tiền trình đang thực hiện đã đạt đến bước nào.

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)

Bước 2: Khởi tạo một component mới trong project và đặt tên là progress-bar

Bước 3: Tạo mới thuộc tính để component cha có thể truyền vào background color, progress color và mức độ hoàn thành (% quá trình).

@Input() backgroundColor = '#D9D9D9';
@Input() progressColor = '#4CAF50';
@Input() width = 50;

Bước 4: Đặt template cho component như sau:

<h2>Progress Bar</h2>

<div class="progress-bar-container" [style.backgroundColor]="backgroundColor">
  <div class="progress" [ngStyle]="{
  backgroundColor: progressColor,
  width: width + '%'
  }"></div>
</div>

Bước 5: đặt style cho component

.progress {
  height: 20px;
}

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

<app-progress-bar width="65"></app-progress-bar>

Bước 7: Kiểm tra kết quả có giống với hình sau:

Mã nguồn tham khảo tại đây.

Trên đây CodeGym đã cùng với bạn luyện tập về component 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é!