Angular material dialog outside iframe

Question

I'm having a problem displaying an Angular material dialog outside of an iframe. I have two applications, an application that is used to present other applications through an iframe and another application that is displayed inside the iframe. The second app (the one that renders inside the iframe) has different dialogs but they are centered inside the iframe, I would like them to be centered relative to the first app.

I hope that with the images you can understand what I am trying to achieve.

Current:
Imagen1
What I'm trying to achieve:
Imagen2

In my first application, I have a simple iframe where I use a variable to assign the address where the front of the application that I want to display is located.

In my second application, I have called a function to display an Angular material dialog.

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from '../dialog/dialog.component';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {

  constructor(private matDialog: MatDialog) { }

  public showDialog(): void {
    this.matDialog.open(DialogComponent);
  }

}

I am using Angular 11.0.5
PD: My first post here :3

Angular material dialog outside iframe

0 Answers