Trang chủ » Blog » [Thực hành] Hiển thị thông tin thú nuôi

[Thực hành] Hiển thị thông tin thú nuôi

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

Mục tiêu

Hiển thị thông tin thú nuôi- nắm bắt được về component data binding trong Angular.

Mô tả- hiển thị thông tin thú nuôi

Tạo ứng dụng hiển thị thông tin về pet  và cho phép người dùng cập nhật thông tin như tên, hình ảnh.

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à pet

Bước 3: Tạo mới các thuộc tính và hàm để update lưu trữ và hiển thị thông tin của pet trong class:

export class PetComponent {
    petName = 'puppie';
    petImage = 'http://yourdost-blog-images.s3-ap-southeast-1.amazonaws.com/wp-content/uploads/2016/01/03165939/Dogs.jpg';
    constructor() { }

    updateName(name) {
        this.petName = name;
    }

    updateImage(image) {
        this.petImage = image;
    }

}

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

<h2>Pet profile</h2>
<label>
    Pet name:
    <input type="text" (change)="updateName($event.target.value)">
</label>
<br >
<label>
    Pet image:
    <input type="url" (change)="updateImage($event.target.value)">
</label>
<br >
<h3>Pet name: {{petName}}</h3>
<img [src]="petImage" style="max-width: 100%">

Bước 5: Chạy ứng dụng với ng serve để xem kết quả.

hiển thị thông tin thú nuôi

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

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

5 + 15 =

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.

15 + 13 =

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