Lab5 Angular 16
Bài 1:
Xây dựng sản phẩm
Thiết kế giỏ hàng khi người dùng click mua sản phẩm như sau:
Hướng dẫn:
bai1.component.css
img {
width: 100%;
padding: 20px;
}
.input-qty {
width: 60px;
height: 25px;
float: right
}
.table td,
th {
padding: 0.3rem;
}
Th.S Nguyễn Đình Hoàng 1
Lab5 Angular 16
bai1.component.html
<div class="text-right mt-1">
<button class="btn btn-primary" data-toggle="modal" data-
target="#cartModal">Cart
({{totalItems()}})
</button>
</div>
<!-- Modal -->
<div class="modal fade" id="cartModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title " id="myModalLabel">Cart</h4>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body p-0">
<table class="table table-bordered mb-0">
<tr *ngFor="let items of cartItems; let i=index">
<td>{{items.title}}</td>
<td style="width:120px">QTY:
<input [(ngModel)]="items.qtys" class="form-control
input-qty" type="number" min="1">
</td>
<td class="text-right">{{items.price | currency:
"VND"}}</td>
<td>
<button (click)="removeItem(i)"><span class="fa fa-
trash"></span></button>
</td>
</tr>
<tr *ngIf="cartItems.length == 0">
<td colspan="4" class="text-center">Cart is empty</td>
</tr>
<tr *ngIf="cartItems.length > 0">
<td></td>
<td class="text-right">Cart Total </td>
<td class="text-right text-danger font-weight-
bold">{{Total()| currency:"VND"}}</td>
<td></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
Th.S Nguyễn Đình Hoàng 2
Lab5 Angular 16
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-6 col-sm-3 text-center" *ngFor="let item of products">
<img [src]="item.image" alt="">
<h5>{{ item.title }}</h5>
<h6 class="text-danger">{{item.price | currency:'VND' }}</h6>
<p class="text-center"><input [(ngModel)]="item.qty" type="number"
class="form-control" placeholder="Qty"
min="1" /></p>
<button (click)="addToCart(item)" class="btn btn-sm btn-primary">Add
to Cart</button>
</div>
</div>
</div>
bai1.component.ts
products: any[] = [
{ id: 1, title: 'Macbook Pro', price: 25000000, qty: 1, image:
'./assets/images/1.jpg' },
{ id: 2, title: 'Asus ROG Gaming', price: 17000000, qty: 1, image:
'./assets/images/2.jpg' },
{ id: 3, title: 'Amazon Kindle', price: 15000000, qty: 1, image:
'./assets/images/3.jpg' },
{ id: 4, title: 'Another Product', price: 18000000, qty: 1, image:
'./assets/images/4.jpg' },
]
cartItems: any[] = []
addToCart(itemToAdd: any) {
// Add the item or increase qty
let itemInCart = this.cartItems.filter(item => item.id === itemToAdd.id);
let isItemInCart = itemInCart.length > 0;
if (isItemInCart === false) {
this.cartItems.push({
id: itemToAdd.id, title: itemToAdd.title,
price: itemToAdd.price, qtys: itemToAdd.qty, image: itemToAdd.image
})
} else {
itemInCart[0].qtys += itemToAdd.qty;
}
itemToAdd.qty = 1;
console.log(this.cartItems)
console.log(this.products)
}
Th.S Nguyễn Đình Hoàng 3
Lab5 Angular 16
Bài 2:
Xây dựng sản phẩm
Thiết kế giỏ hàng khi người dùng click mua sản phẩm như sau:
− Giỏ hàng được thay đổi số lượng, khi thay đổi số lượng thì tính lại tiền và tổng tiền
− Xóa sản phẩm thì tính lại tổng tiền
− Chức năng tìm kiếm, khách có thể tìm kiếm theo tên
Hướng dẫn:
bai2.component.css
img {
width: 100%;
height: 100%;
}
.input[type=text] {
Th.S Nguyễn Đình Hoàng 4
Lab5 Angular 16
width: 150px;
-webkit-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.input[type=text]:focus {
width: 100%;
}
bai2.component.html
<div class="container mt-3">
<div class="row">
<div class="col-12 col-sm-4 col-md-4 col-lg-4 mt-2 ">
<input type="text" [(ngModel)]="searching" placeholder="Tìm sản
phẩm" class="input form-control mr-sm-2">
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4 mt-2 form-inline my-2 my-
lg-0">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"
data-toggle="modal"
data-target=".bd-example-modal-xl">Giỏ hàng của bạn ! <span
*ngIf="itemcount()==0">Bạn
chưa mua hàng</span>
<span *ngIf="itemcount()!=0">
Bạn đã mua {{itemcount()}} hàng !
</span>
</button>
</div>
</div>
<div class="row">
<!-- hiển thị sản phẩm dùng ngfor -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mt-2 " *ngFor="let item of
filterName()">
<div class="card text-center border-primary" style="height: 100%;">
<div class="card-header bg-primary text-light ">
<!-- hiển thị tên-->
{{ (item.name)}}
</div>
<div class="card-body">
<!-- hiển thị hình -->
<img [src]="item.image" alt=''>
</div>
<div class="card-footer text-danger">
<!-- hiển thị giá -->
{{item.price | currency}}
<br>
<button class="btn btn-primary"
(click)="addCart(item)">Mua</button>
</div>
</div>
</div>
</div>
Th.S Nguyễn Đình Hoàng 5
Lab5 Angular 16
</div>
<!-- model -->
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-
labelledby="myExtraLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<table style="width: 100%;" class="text-center table"
*ngIf="cart.length>0; else elseTemplate">
<tr>
<th>HÌNH</th>
<th>SẢN PHẨM</th>
<th>Đơn giá</th>
<th>Số lượng</th>
<th>Tiền</th>
<th></th>
</tr>
<!-- hiển thị giỏ hàng -->
<tr *ngFor="let item of cart; let i=index">
<td><img [src]="item.image" style="height: 100px;width:
100px;"></td>
<td class="align-middle">{{item.name}}</td>
<td class="align-middle">{{item.price | currency:
"VND"}}</td>
<td class="align-middle">
<button class="btn btn-primary"
(click)="increment(i)">+</button>
{{item.incart}}
<button class="btn btn-primary"
[disabled]="item.incart<=1" (click)="decrement(i)">-
</button>
</td>
<td class="align-middle">{{item.price* item.incart |
currency: "VND"}}</td>
<td class="align-middle"><button class="btn btn-danger"
(click)="Delete(i)">Remove</button></td>
</tr>
<tr>
<th colspan="3">Tổng tiền</th>
<th>{{itemcount()| currency:"VND"}}</th>
<th>{{sumTotal() | currency:"VND"}}</th>
<th><button class="btn btn-danger" (click)="DeleteAll()">Xóa
hết</button>
</th>
</tr>
</table>
<ng-template #elseTemplate>
<div class="btn btn-danger"> Mời bạn chọn mua !</div>
</ng-template>
</div>
</div>
Th.S Nguyễn Đình Hoàng 6
Lab5 Angular 16
</div>
bai2.component.ts
products: any[] = [
{
id: 1,name: "Đồng hồ thụy sỹ",image: "assets/images/1001.jpg",
price: 1200,
incart: 1,
total: 0
},
{
id: 2,
name: "Dell Star X",
image: "assets/images/1003.jpg",
price: 700,
incart: 1,
total: 0
},
{
id: 3,
name: "Sony Vaio 2017",
image: "assets/images/1004.jpg",
price: 1700,
incart: 1,
total: 0
},
{
id: 4,
name: "Máy ảnh Canon",
image: "assets/images/1005.jpg",
price: 300,
incart: 1,
total: 0
},
{
id: 5,
name: "Vòng cưới France",
image: "assets/images/1009.jpg",
price: 7000,
incart: 1,
total: 0
},
{
id: 6,
name: "Motorola thế hệ 5",
image: "assets/images/1011.jpg",
price: 900,
incart: 1,
total: 0
},
{
id: 7,
Th.S Nguyễn Đình Hoàng 7
Lab5 Angular 16
name: "Mũ cao bồi Mexico",
image: "assets/images/1014.jpg",
price: 100,
incart: 1,
total: 0
},
{
id: 8,
name: "Nước hoa Korea",
image: "assets/images/1023.jpg",
price: 600,
incart: 1,
total: 0
}
]
cart: any[] = []
searching: string = ''
tongtien: number = 0
addCart(item: any) {
var flag = false;
if (this.cart.length == 0) {
flag = false;
}
else {
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i].id == item.id) {
flag = true;
}
}
}
if (flag == false) {
this.cart.push(item);
}
else {
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i].id == item.id) {
this.cart[i].incart++;
}
}
}
}
filterName() {
if (this.searching == null) {
return this.products;
}
else {
if (this.searching)//có
{
console.log(this.searching);
console.log(this.searching.toUpperCase().split(' '));
return this.products.filter((item) => {
Th.S Nguyễn Đình Hoàng 8
Lab5 Angular 16
return (this.searching).toUpperCase().split(' ').every(v =>
item.name.toUpperCase().includes(v));
})
}
else {
return this.products;
}
}
}
Bài 3:
Hướng dẫn:
Copy project lab5 và đổi tên thành lab5_menu sau đó thực hiện tạo menu dùng chung cho
các component.
Th.S Nguyễn Đình Hoàng 9
