Trang chủ » Blog » [Thực hành] Chức năng thay đổi font-size

[Thực hành] Chức năng thay đổi font-size

bởi CodeGym | 26/12/2023 17:16 | Bài thực hành | Blog

Mục tiêu

Chức năng thay đổi font-size- nắm bắt được về component data binding trong Angular.

Mô tả- chức năng thay đổi font-size

Tạo ứng dụng thay đổi font size của 1 phần tử (đoạn text chẳng hạn)

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à font-size-editor

Bước 3: Tạo mới thuộc tính fontSize và hàm để update fontSize trong class:

fontSize = 14;
onChange(value) {
    this.fontSize = value;
}

Bước 4: Tạo phần HTML markup bao gồm:

<h2>Font size editor</h2>

<div>
 <label>Enter font size (px):</label>
   <input type="range" min="9" max="72" value="18">
</div>

<p class="output">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi cumque nostrum quibusdam. Inventore quibusdam debitis, tempore error voluptatem explicabo ipsum?
</p>

Bước 5: Bind (lưu ý cần sử dụng đến binding hai chiều) value của thẻ input và thuộc tính font-size với nhau.

[(ngModel)]="fontSize"

Bước 6: Đồng thời binding thuộc tính font-size vào style của thẻ chứa nội dung. Để binding style thì có thể dùng cú pháp tương tự như sau:

[style.fontSize.px]="tên-thuộc-tính"

Mã nguồn tham khảo: https://github.com/codegym-vn/angular-training/tree/develop/angular-overview/src/app/font-size-editor

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é!

Download - Giáo trình thuật toán

8 + 6 =

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

13 + 1 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM