import { Component, OnInit } from '@angular/core'; import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; interface EquirmentModel { id: number; name: string; desc: string; type: string; pic: string; } @Component({ selector: 'app-equipment', templateUrl: './equipment.component.html', styleUrls: ['./equipment.component.scss'] }) export class EquipmentComponent implements OnInit { page = 1; pageSize = 10; closeResult = ''; listEquirment: EquirmentModel[] = [ { id: 1, name: "จอคอมพิวเตอร์", desc: "หน้าจอขนาด 22 นิ้ว", type: "it", pic: "assets\img\mo1.jpg" }, { id: 2, name: "เมาส์", desc: "...", type: "it", pic: "assets\img\mou.jpg" }, { id: 3, name: "โน๊ตบุ๊ค", desc: "หน้าจอขนาด 20 นิ้ว", type: "it", pic: "assets\img\notebook.jpg" }, { id: 4, name: "คีย์บอร์ด", desc: "...", type: "it", pic: "assets\img\keyboard.png" } ] collectionSize = this.listEquirment.length; constructor(private modalService: NgbModal) { } ngOnInit(): void { } open(content) { this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } private getDismissReason(reason: any): string { if (reason === ModalDismissReasons.ESC) { return 'by pressing ESC'; } else if (reason === ModalDismissReasons.BACKDROP_CLICK) { return 'by clicking on a backdrop'; } else { return `with: ${reason}`; } } refreshCountries() { this.listEquirment = this.listEquirment .map((item, i) => ({ id: i + 1, ...item })) .slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize + this.pageSize); } }