Angular dialog : How to insert the dialog in another template

Question

I have a dialog and I want the dialog (not the button) top open inside another component. What is the best method? If I insert the html tag is always display, not only when we click. Is there a template target method I could use?

  
 
  
  
  
 
   
 
    
    @Component({
      selector: 'app-dialog-button',
      templateUrl: './dialog-button.component.html',
      styleUrls: ['./dialog-button.component.scss']
    })

    export class DialogButtonComponent {

      @Input() isDialogOpened: boolean;

      constructor(
        public dialog: MatDialog
        ) { }

        dialogRef = null;

        toggleDialog() {
          const dialogOpened = this.dialog.getDialogById('dialog-button-dialog-container');
            if(!dialogOpened) {
                this.dialogRef = this.dialog.open(dialogButtonDialogComponent, {
                    id: 'dialog-button-dialog-container',
                    hasBackdrop: false,
                });
            } else {
                this.dialogRef.close();
            }
        }
    }

    @Component({
      selector: 'app-dialog-button-dialog',
      templateUrl: 'dialog-button-dialog.component.html'
    })
    export class DialogButtonDialogComponent {

      public getState: MatDialogState

      constructor(
        public dialog: MatDialog
        ) { }

    }
 
    
    <app-dialog-button></app-dialog-button>
<flex-box>
<element3 id="dialog"></element3> <!-- I want the dialog to open here! -->
<element2></element2>
<element1></element1>
</flex-box>
 
   
 
  

Answer 1

从您的对话框组件构建一个实例并在其他组件中使用。