Issue :when I go fullscreen the popup modal is not visible on the main screen

Hello, Ankaiah,
 
Thank you for your question.
 
You are right about the fact that the mentioned example is not a suitable option for Angular. It is due to the specific way Angular operates with elements.
 
Instead, we have prepared a sample demonstrating implementation of the custom pop-up within the full-screen mode. It can be found in attachments. Run the following commands to launch the sample:

npm install
ng serve

 
Also, we want to provide explanation about the approach itself.
It implies overwriting the function responsible for opening the full-screen mode.
 
First, create the desired pop-up element and place it right after/before Flexmonster container. Next, wrap both the pop-up and the container with an additional div element, as shown below:

<div id="wrapper">
    <div id="custom-popup">
    </div>
    <fm-pivot></fm-pivot>
</div>

 
Next, specify the height and width parameters of the component as '100%':

<fm-pivot [width]="'100%'" [height]="'100%'"></fm-pivot>

It is required to fit the dimensions of the container with the wrapper.
An additional step is to apply specific styling after the component is rendered. Use the ready event to invoke the function responsible for this operation:

<fm-pivot [width]="'100%'" [height]="'100%'" (ready)="adjustDimensions()"></fm-pivot>

The function adjustDimensions() itself has the following structure:

adjustDimensions() {
  let subWrapper = <HTMLElement>document.querySelector("#wrapper > fm-pivot > div");
  subWrapper.style.height = "100%";
}

 
Finally, overwrite the handler of the "Fullscreen" button so that it use the wrapper as a root for the full-screen mode:

customizeToolbar(toolbar: Flexmonster.Toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    tabs[tabs.length - 1].handler = toggleFullscreen;
    return tabs;
  };

  function toggleFullscreen() {
    if (document.fullscreenElement) document.exitFullscreen();
    else document.getElementById("wrapper").requestFullscreen();
  };
}

Complement the Toolbar with the mentioned button that opens the pop-up itself.
 
Please note that the pop-up should not be displayed by default. Show it after the user presses the dedicated button. For example:

customizeToolbar(toolbar: Flexmonster.Toolbar) {
  var tabs = toolbar.getTabs();
  toolbar.getTabs = function () {
    tabs.unshift({
      id: "open-custom-popup",
      title: "Pop-Up",
      icon: tabs[1].icon,
      handler: openPopup
    });
    tabs[tabs.length - 1].handler = toggleFullscreen;
    return tabs;
  };

  function toggleFullscreen() {
    if (document.fullscreenElement) document.exitFullscreen();
    else document.getElementById("wrapper").requestFullscreen();
  };

  function openPopup() {
    document.getElementById("custom-popup").style.display = "block";
  }
}

 
Please let us know if it works for you.
Do not hesitate to contact us in case additional questions arise.
 
Best regards,
 
Illia

Hello, Ankaiah,
 
Our team is wondering whether the provided approach works for your case.
 
We are looking forward to hearing from you.
 
Best regards,
Illia

Hello, Ankaiah,
 
Our team is wondering if you had some time to check out the provided solution.
 
Please let us know if it works for you.
 
Regards,
Illia