⚡️ Unique name for modal share + new event from parent to children instead of NavigationEnd + all component in one div (avoid moving two divs in the body at the same time)

src/app/components/share-modal/share-modal.component.html

@@ -1,3 +1,4 @@
+<div id="share-modal-{{pinId}}">
   <!-- Fond assombri -->
   <div
     class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
@@ -6,12 +7,12 @@
       'opacity-100': isShareModalOpen
     }"
     (click)="closeShareModal()"
-  id="share-modal-background"
+    id="share-modal-background-{{pinId}}"
   ></div>
 
   <!-- Main modal -->
   <div
-  id="share-modal"
+    id="share-modal-{{pinId}}"
     tabindex="-1"
     aria-hidden="true"
     [ngClass]="{
@@ -114,3 +115,4 @@
       </div>
     </div>
   </div>
+</div>

src/app/components/share-modal/share-modal.component.ts

@@ -1,9 +1,8 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NavigationEnd, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { Subject, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
 import { FriendsService } from '../../services/friends/friends.service';
 import { ModalService } from '../../services/modal/modal.service';
 import { PinService } from '../../services/pin/pin.service';
@@ -16,9 +15,9 @@ import { PinService } from '../../services/pin/pin.service';
 })
 export class ShareModalComponent implements OnInit, OnDestroy {
   modalId: string = 'share-modal';
+
   isShareModalOpen = false;
   private modalSub!: Subscription;
-  private routerSubscription!: Subscription;
   isFriendModalOpen: boolean = false;
   hasAcceptedFriends: boolean = false;
   hasPendingFriends: boolean = false;
@@ -26,41 +25,35 @@ export class ShareModalComponent implements OnInit, OnDestroy {
   searchTermChanged = new Subject<string>();
   listUser: any[] = [];
   listFriend: any[] = [];
-  pinId: string = '';
+  
+  @Input() pinId!: string;
+  @Input() pinOpened!: EventEmitter<void>;
 
   constructor(
     private modalService: ModalService,
     private friendService: FriendsService,
     private pinService: PinService,
-    private router: Router
   ) {}
 
   ngOnInit() {
+    this.modalId = 'share-modal-' + this.pinId;
+
     this.modalSub = this.modalService
       .getModalState(this.modalId)
       .subscribe((open) => {
         this.isShareModalOpen = open;
         if (open) {
           this.getFriend();
-          this.pinId = this.modalService.getCurrentPinId();
-          setTimeout(() => this.moveModalToBody(), 0);
         }
       });
 
-    // S'abonner aux événements de navigation du router
+    this.pinOpened.subscribe(() => {
-    this.routerSubscription = this.router.events
+      this.moveModalToBody();
-      .pipe(filter((event) => event instanceof NavigationEnd))
-      .subscribe(() => {
-        // Attendre que le DOM soit mis à jour après la navigation
-        setTimeout(() => this.moveModalToBody(), 0);
     });
   }
 
   ngOnDestroy() {
     this.modalSub?.unsubscribe();
-    if (this.routerSubscription) {
-      this.routerSubscription.unsubscribe();
-    }
   }
 
   openShareModal() {
@@ -71,20 +64,11 @@ export class ShareModalComponent implements OnInit, OnDestroy {
     this.modalService.closeModal(this.modalId);
   }
 
-  ngAfterViewInit() {
-    // Appel initial pour déplacer le modal
-    this.moveModalToBody();
-  }
-
   private moveModalToBody(): void {
-    const modal = document.getElementById('share-modal');
+    const modal = document.getElementById(this.modalId);
     if (modal && modal.parentElement !== document.body) {
       document.body.appendChild(modal);
     }
-    const bg = document.getElementById('share-modal-background');
-    if (bg && bg.parentElement !== document.body) {
-      document.body.appendChild(bg);
-    }
   }
 
   onSearchTermChange(value: string): void {