in my Project i use sideNav with router and different components when i navigate between 4 components and when i click button which diplay a model with this methode :

public onOpenModal(profile: Profile, mode: String) {
    console.log("openModel");
    const container = document.getElementById('main-container-edit');
    const button = document.createElement('button');
    button.type = 'button';
    button.style.display = 'none';
    button.setAttribute('data-toggle', 'modal');
    if (mode === 'edit') {
      this.profile = profile;
      button.setAttribute('data-target', '#editProfileModal');
    }
    if (mode === 'delete') {
      this.deleteProfile = profile;
      button.setAttribute('data-target', '#deleteProfileModal');
    }
    container?.appendChild(button);
    button.click();

  }

this is the result: int tow photos the model model 2 donc i cant Access to It .