add modal detail

client/src/app/features/dashboard/dashboard.component.html

@@ -1,5 +1,5 @@
 <main
-  class="relative overflow-auto max-h-[700px] shadow-md sm:rounded-lg"
+  class="relative overflow-auto max-h-[610px] shadow-md sm:rounded-lg"
   #table
 >
   <table *ngIf="isLoaded" class="table">
@@ -118,23 +118,7 @@
           {{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }}
         </td>
         <td class="px-4 py-4 flex">
-          <div class="cursor-pointer">
-            <svg
-              class="w-6 h-6 text-gray-800 dark:text-white"
-              aria-hidden="true"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 20 20"
-            >
-              <path
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1"
-                d="M7.75 4H19M7.75 4a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 4h2.25m13.5 6H19m-2.25 0a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 10h11.25m-4.5 6H19M7.75 16a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 16h2.25"
-              />
-            </svg>
-          </div>
+          <recipe-modal id="{{ recipe.id }}"></recipe-modal>
         </td>
       </tr>
     </tbody>

client/src/app/features/dashboard/dashboard.component.ts

@@ -1,25 +1,16 @@
-import {
-  AfterContentChecked,
-  AfterRenderRef,
-  AfterViewChecked,
-  AfterViewInit,
-  Component,
-  ElementRef,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { UserService } from 'src/app/core/services/user.service';
 import { User } from 'src/app/core/models/user.model';
 import { DatePipe, NgFor, NgIf } from '@angular/common';
 import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
-import { BehaviorSubject } from 'rxjs';
 import { environment } from 'src/environments/environment';
+import { RecipeModalComponent } from 'src/app/shared/modal/recipe-modal.component';
 
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [NgIf, NgFor, DatePipe],
+  imports: [NgIf, NgFor, DatePipe, RecipeModalComponent],
   templateUrl: './dashboard.component.html',
 })
 export class DashboardComponent implements OnInit {