Update Add html

src/app/pages/home-page/home-page-calendar.component.html

+<div class="modal-header">
+    <h4 class="modal-title">Hi there!</h4>
+    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class="modal-body">
+    <p>Hello, {{name}}!</p>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
+</div>
\ No newline at end of file

src/app/pages/home-page/home-page.component.ts

@@ -12,35 +12,7 @@ import { RoomDetail } from 'src/app/models/RoomDetail.model';
 
 @Component({
   selector: 'ngbd-modal-content',
-  template: ` 
-  <div class=" col-md-12" style="padding: 0; ">
-        <div class="card" style="margin: 0; ">
-            <div class=" card-header">
-                <h5 class=" title">รายละเอียดการจอง</h5>
-            </div>
-            <div class=" card-body">
-                <div class="row">
-                    <div class="col-md-12">
-                        <label> ชื่อผู้จอง </label>
-                        <input readonly class="form-control" placeholder="" type="text" value="listRoomDetail.userName" />
-                    </div>
-                </div>
-                <div class=" row">
-                    <div class="col-md-12">
-                        <label> เบอร์โทร </label>
-                        <input readonly class="form-control" placeholder="" type="text" />
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-sm-12">
-                        <label for="exampleFormControlSelect1">ชื่อห้อง</label>
-                        <input readonly class="form-control" placeholder="" type="text" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-`
+  templateUrl: './home-page-calendar.component.html'
 })
 
 export class NgbdModalContent {
@@ -265,8 +237,9 @@ export class HomePageComponent implements OnInit {
   }
 
   eventShow() {
+    this.listRoomDetail = this.RoomDetailService.getListRoomDetail();
     const modalRef = this.modalService.open(NgbdModalContent);
-    modalRef.componentInstance.name = 'World';
-
+    modalRef.componentInstance.name = '';
+    modalRef.componentInstance.rName = 'World';
   }
 }
\ No newline at end of file