Trang chủ » Blog » [Thực hành] Ứng dụng Name-Card- Codegym.vn

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

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

Mục tiêu

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

Mô tả- Ứng dụng Name-Card

Tạo ứng dụng NameCard để hiển thị thông tin của một người.

Hướng dẫn

Bước 1: Khởi tạo project với ng cli

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

Bước 3: Tạo mới thuộc tính để component cha có thể truyền vào tên, email và số điện thoại

@Input() cardName: string;
@Input() email: string;
@Input() phone: string;

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

<div class="name-card">
  <div class="name-card__content-left">
    <img src="/assets/angular.png" alt="Logo" class="name-card__avatar">
  </div>
  <div class="name-card__content-right">
    <h3 class="name-card__heading">{{ cardName }}</h3>
    <p class="name-card__text">{{ email }}</p>
    <p class="name-card__text">{{ phone }}</p>
  </div>
</div>

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

.name-card {
  display: flex;
  max-width: 500px;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.name-card__content-left {
  max-width: 35%;
}
.name-card__avatar {
  max-width: 100%;
  display: block;
}

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

<app-name-card cardName="Professional Dev" email="prodev@abc.xyz" phone="0123456789"></app-name-card>

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

xem thêm mã nguồn tham khảo tại đây !

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

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.

2 + 2 =

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