0

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>
snowlight
  • 23
  • 3

1 Answers1

0

build a instance from your dialog component and use in others.

mahtabsarraf
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 27 '22 at 10:56
  • I am sorry I don't understand. In my dialog component I have built the template of the dialog but if I insert the template tag in another template, it displays all the time, not when the user clicks on the dialog button – snowlight Jul 20 '22 at 15:10