feat: modal

src/app/modal-rotations/modal-rotations.component.html

@@ -1,18 +1,14 @@
-<ng-template #rotationsModal let-modal>
   <div class="modal-header">
-    <h4 class="modal-title">Edit Player Roles</h4>
+    <h4 class="modal-title">{{ player.name }}</h4>
     <button
       type="button"
       class="btn-close"
-      (click)="modal.dismiss()"
+      (click)="activeModal.dismiss()"
       aria-label="Close"
     ></button>
   </div>
   <div class="modal-body">
     <form>
-      <div class="mb-3">
-        <label class="form-label">{{ player.name }}</label>
-      </div>
       <div class="form-check">
         <input
           class="form-check-input"
@@ -66,20 +62,12 @@
     </form>
   </div>
   <div class="modal-footer">
-    <button
-      type="button"
-      class="btn btn-secondary"
-      (click)="modal.dismiss()"
-    >
-      Cancel
-    </button>
     <button
       type="button"
       class="btn btn-primary"
-      (click)="savePlayer(); modal.close()"
+      (click)="savePlayer(); activeModal.close()"
     >
       Save
     </button>
   </div>
-</ng-template>
 

src/app/model.ts

@@ -2,7 +2,7 @@ export class Player{
   name: string;
   outside: boolean = false;
   middle: boolean = false;
-  opposite: boolean = false;
+  opposite: boolean = false; // dia
   setter: boolean = false;
   libero: boolean = false;
   constructor( name: string){

src/app/screen-rotations/screen-rotations.component.html

@@ -4,12 +4,9 @@
   <ul class="list-group mb-3">
       @for (player of players; track $index) {
         <li class="list-group-item">{{ player.name }}</li>
-        <button
-        class="btn btn-sm btn-primary"
-        (click)="openPlayerDialog(player)"
-      >
-        Edit Roles
-      </button>
+        <button class="btn btn-outline-primary" (click)="open(player)">
+	<div>Edit Roles</div>
+</button>
       }
   </ul>
   <div class="input-group mb-3">

src/app/screen-rotations/screen-rotations.component.ts

@@ -34,5 +34,9 @@ export class ScreenRotationsComponent {
       console.log('Modal dismissed');
     });
   }
+  open(player: Player){
+    const modalRef = this.modalService.open(ModalRotationsComponent);
+    modalRef.componentInstance.player = player;
+  }
 
 }