Add หน้าสามารถเปลี่ยนหน้าได้

src/app/pages/admin-equirment/admin-equirment.component.ts

@@ -63,6 +63,7 @@ export class AdminEquirmentComponent implements OnInit {
     this.listEquirmentModel = this.equirmentService.getListEquirment();
     this.listRoomModel = this.roomService.getListRoom();
     this.collectionSizeListRoom = this.listRoomModel.length
+    this.collectionSize = this.listEquirmentModel.length
     console.log("listRoom", this.listRoomModel)
     this.myFormRoom = new FormGroup({
       userNameForm : new FormControl('',[Validators.required]),

src/app/pages/equipment/equipment.component.html

@@ -23,7 +23,7 @@
                                     (click)="Ropen(contentroom)">เพิ่มรายการ</button>
 
                                 <div class="row">
-                                    <div class="col-sm-3" *ngFor="let item of listRoomModel">
+                                    <div class="col-sm-3" *ngFor="let item of listRoomModel|slice: (pageListRoom-1) * pageSizeListRoom :(pageListRoom-1) * pageSizeListRoom + pageSizeListRoom ;let i = index">
                                         <div class="card" style="
                                         padding: 10px;">
                                             <div class="card-body">
@@ -47,12 +47,13 @@
                             </div>
 
                             <div class="d-flex justify-content-between p-2">
-                                <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
-                                    (pageChange)="refreshCountries()">
+                                <ngb-pagination [collectionSize]="collectionSizeListRoom" [(page)]="pageListRoom"
+                                    [pageSize]="pageSizeListRoom">
+                                    <ng-template ngbPaginationPrevious>Previous</ng-template>
+                                    <ng-template ngbPaginationNext>Next</ng-template>
                                 </ngb-pagination>
-
-                                <select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
-                                    (ngModelChange)="refreshCountries()">
+                                <select class="custom-select" style="width: auto" [(ngModel)]="pageSizeListRoom"
+                                    (ngModelChange)="pageListRoom=1">
                                     <option [ngValue]="10">10 items per page</option>
                                     <option [ngValue]="50">50 items per page</option>
                                     <option [ngValue]="100">100 items per page</option>
@@ -76,7 +77,7 @@
                                     (click)="Eopen(contentequirment)">เพิ่มรายการ</button>
 
                                 <div class="row">
-                                    <div class="col-sm-3" *ngFor="let item of listEquirmentModel">
+                                    <div class="col-sm-3" *ngFor="let item of listEquirmentModel |slice: (page-1) * pageSize :(page-1) * pageSize + pageSize ;let i = index">
                                         <div class="card" style="
                                         padding: 10px;">
                                             <div class="card-body">
@@ -101,18 +102,18 @@
                             </div>
 
                             <div class="d-flex justify-content-between p-2">
-                                <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
-                                    (pageChange)="refreshCountries()">
+                                <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize">
+                                    <ng-template ngbPaginationPrevious>Previous</ng-template>
+                                    <ng-template ngbPaginationNext>Next</ng-template>
                                 </ngb-pagination>
 
                                 <select class="custom-select" style="width: auto" [(ngModel)]="pageSize"
-                                    (ngModelChange)="refreshCountries()">
+                                    (ngModelChange)="page=1">
                                     <option [ngValue]="10">10 items per page</option>
                                     <option [ngValue]="50">50 items per page</option>
                                     <option [ngValue]="100">100 items per page</option>
                                 </select>
                             </div>
-
                         </div>
                     </div>
                 </div>

src/app/pages/equipment/equipment.component.ts

@@ -18,14 +18,21 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 })
 export class EquipmentComponent implements OnInit {
   time = { hour: 13, minute: 30 };
+
+  closeResult = '';
+  
   page = 1;
   pageSize = 10;
+  collectionSize = 0;
 
-  closeResult = '';
+  pageListRoom = 1;
+  pageSizeListRoom = 10;
+  collectionSizeListRoom = 0;
 
   listEquirmentModel: Equirment[] = [];
   listRoomModel: Room[] = [];
-  collectionSize = this.listEquirmentModel.length;
+  listItemDetail: ItemDetail[] = [];
+  listRoomDetail: RoomDetail[] = [];
 
   modelEquirment = new Equirment();
   modelRoom = new MyRoom();
@@ -55,6 +62,8 @@ export class EquipmentComponent implements OnInit {
   ngOnInit() {
     this.listEquirmentModel = this.equirmentService.getListEquirment();
     this.listRoomModel = this.roomService.getListRoom();
+    this.collectionSizeListRoom = this.listRoomModel.length
+    this.collectionSize = this.listEquirmentModel.length
     this.myFormRoom = new FormGroup({
       userNameForm : new FormControl('',[Validators.required]),
       rTelephone : new FormControl('',[Validators.required]),

src/app/service/equirment.service.ts

@@ -36,7 +36,119 @@ export class EquirmentService {
       eqDesc: "...",
       eqType: "it",
       eqPic: "assets/img/keyboard.png"
-    }
+    },
+    {
+      eqId: 1,
+      eqName: "จอคอมพิวเตอร์",
+      eqDesc: "หน้าจอขนาด 22 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/mo1.jpg"
+    },
+    {
+      eqId: 2,
+      eqName: "เมาส์",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/mou.jpg"
+    },
+    {
+      eqId: 3,
+      eqName: "โน๊ตบุ๊ค",
+      eqDesc: "หน้าจอขนาด 20 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/notebook.jpg"
+    },
+    {
+      eqId: 4,
+      eqName: "คีย์บอร์ด",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/keyboard.png"
+    },
+    {
+      eqId: 1,
+      eqName: "จอคอมพิวเตอร์",
+      eqDesc: "หน้าจอขนาด 22 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/mo1.jpg"
+    },
+    {
+      eqId: 2,
+      eqName: "เมาส์",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/mou.jpg"
+    },
+    {
+      eqId: 3,
+      eqName: "โน๊ตบุ๊ค",
+      eqDesc: "หน้าจอขนาด 20 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/notebook.jpg"
+    },
+    {
+      eqId: 4,
+      eqName: "คีย์บอร์ด",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/keyboard.png"
+    },
+    {
+      eqId: 1,
+      eqName: "จอคอมพิวเตอร์",
+      eqDesc: "หน้าจอขนาด 22 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/mo1.jpg"
+    },
+    {
+      eqId: 2,
+      eqName: "เมาส์",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/mou.jpg"
+    },
+    {
+      eqId: 3,
+      eqName: "โน๊ตบุ๊ค",
+      eqDesc: "หน้าจอขนาด 20 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/notebook.jpg"
+    },
+    {
+      eqId: 4,
+      eqName: "คีย์บอร์ด",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/keyboard.png"
+    },
+    {
+      eqId: 1,
+      eqName: "จอคอมพิวเตอร์",
+      eqDesc: "หน้าจอขนาด 22 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/mo1.jpg"
+    },
+    {
+      eqId: 2,
+      eqName: "เมาส์",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/mou.jpg"
+    },
+    {
+      eqId: 3,
+      eqName: "โน๊ตบุ๊ค",
+      eqDesc: "หน้าจอขนาด 20 นิ้ว",
+      eqType: "it",
+      eqPic: "assets/img/notebook.jpg"
+    },
+    {
+      eqId: 4,
+      eqName: "คีย์บอร์ด",
+      eqDesc: "...",
+      eqType: "it",
+      eqPic: "assets/img/keyboard.png"
+    },
   ]
 
   addEquirment(model: Equirment) {

src/app/service/item-detail.service.ts

@@ -18,8 +18,8 @@ export class ItemDetailService {
         eqPic: "assets/img/mou.jpg"
       },
       userName: 'เกม',
-      sDate: '2021/12/14',
-      eDate: '2021/12/14',
+      sDate: '09/12/2021',
+      eDate: '09/12/2021',
       sTime: {
         hour: 22,
         minute: 30,
@@ -46,8 +46,8 @@ export class ItemDetailService {
         eqPic: "assets/img/notebook.jpg"
       },
       userName: 'แป๊ะ',
-      sDate: '2021/12/14',
-      eDate: '2021/12/14',
+      sDate: '09/12/2021',
+      eDate: '09/12/2021',
       sTime: {
         hour: 22,
         minute: 30,