Show ng-container content as a popup

Question

How can I make this content in the code below show up as a new popup on the page when triggered and not in a specific section? Is it related to a z-index?

Thanks

<ng-container *ngIf="confirmation">
      <div class="check-email">
        <div class="title-email" fxLayout="row" fxLayoutAlign="center center">{{ 'check-email-title' | translate }}</div>
        <div class="sub-title" fxLayout="row" fxLayoutAlign="center center">{{ 'verify-email' | translate }}</div>
        <div class="email-img" fxLayout="row" fxLayoutAlign="center center">
          <img src="assets/img/email-message.png" />
        </div>
        <div fxLayout="row" fxLayoutAlign="center center">
          {{ 'do-not-see-email' | translate }}
        </div>
        <div fxLayout="row" fxLayoutAlign="center center">
          {{ 'check-spam-folder' | translate }}
        </div>
        <div fxLayout="row" fxLayoutAlign="center center">
          <a class="click-resend-email">Click here &nbsp;</a>
          <div>to send the email again</div>
        </div>
      </div>
    </ng-container>

Answer 1

main

======================

First , you can give the "ng-container" a position property with a value of absolute or fixed (depending on your application), this will make "ng-container" appear on top of everything else if it is the last element in your HTML file , this is what I usually do if no rules were put within the team I was working on, however, if for some reason you can't put it at the end then you can use z-index property with the proper value (usually high number like 1000 if you want to cover everything else that you might've added z-index to). [I'm not saying that adding the element to the last is a best practice but this is what I do especially for small projects] .

Second , use properties top , right , left , and bottom to adjust the position of your element (you don't need to use all of them)

Third , you can assign the display property of "ng-container" the value of none at the start, and whenever you want the container to appear you can change the value of the display property to whatever you want using Js.

ng-container {
    display: block; // or any display setting you're using.
    position: fixed; 
    top: 1rem ;    //
    right: 1rem;   // adjust the position as you need. 
    left: 1rem;    //
    bottom: 1rem;  //
}

=====================

additional

---

1 - you might want to wrap the whole thing in a container to make some kind of an effect to let the user know they need to focus on that element, like blurring or darkening everything else behind your popup, simply you need the wrapping container to have the full width and height of the screen using the values 100vw and 100vh for the width and hight properties respectively, vw and vh is to specify how much to take from the viewport in height or width.

2 - you can change the overflow property of the body to the value hidden if you don't want scroll ability during this popup.

3 - you can detect if the user clicks on the wrapper to cancel this popup (if the element doesn't take all the width of the container).