Cuadro de diálogo de creación de material angular en el mismo componente que la funcionalidad existente

Solución:

Actualizar: No estaba en lo correcto en mis suposiciones de que el TemplateRefEl parámetro de tipo era la referencia del componente; de ​​hecho, en realidad es el “contexto de enlace de datos de la vista incrustada”, como se muestra en la documentación de la TemplateRef#createEmbeddedView método:

abstract createEmbeddedView(context: C): EmbeddedViewRef<C>

Descripción:

Crea una instancia de una vista incrustada basada en esta plantilla y la adjunta al contenedor de la vista.

Parámetros:

context (escribe: C) El contexto de vinculación de datos de la vista incrustada, como se declara en el uso.

---

Puedes pasar en un referencia de plantilla para MatDialog#open:

<ng-template #callAPIDialog>
    <h2 matDialogTitle>Hello dialog!</h2>
    <mat-dialog-actions align="end">
        <button mat-button matDialogClose="no">No</button>
        <button mat-button matDialogClose="yes">Yes</button>
    </mat-dialog-actions>
</ng-template>

import { TemplateRef, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material';

@Component({ /* */ })
export class MyComponent {

    @ViewChild('callAPIDialog') callAPIDialog: TemplateRef<any>;

    constructor(private dialog: MatDialog) { }

    callAPI() {
        let dialogRef = this.dialog.open(this.callAPIDialog);
        dialogRef.afterClosed().subscribe(result => {
            // Note: If the user clicks outside the dialog or presses the escape key, there'll be no result
            if (result !== undefined) {
                if (result === 'yes') {
                    // TODO: Replace the following line with your code.
                    console.log('User clicked yes.');
                } else if (result === 'no') {
                    // TODO: Replace the following line with your code.
                    console.log('User clicked no.');
                }
            }
        })
    }

Inicialmente probé lo que sugirió Edric y el diálogo se abrió perfectamente, pero estaba un poco perdido cuando quise cerrarlo desde el componente después de un poco de procesamiento y no solo con la directiva de plantilla. matDialogClose. Así que realicé una búsqueda sobre este tema y me tomó un tiempo unir todas las piezas y darme cuenta de que la referencia de la plantilla es algo diferente a la referencia del diálogo de esa pieza de la plantilla. Así que manos a la obra poniendo todo junto …

<!-- Edit Company -->
<ng-template #editCompanyModal>
  <div class="mat-dialog-header border-bottom">
    <h2 mat-dialog-title class="mb-0">Edit Company</h2>
    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
      <button mat-icon-button matDialogClose tabindex="-1">
        <mat-icon aria-label="Close dialog">close</mat-icon>
      </button>
    </div>
  </div>
  <form #editCompanyForm="ngForm" role="form" novalidate name="editCompanyForm"
          (ngSubmit)="editCompanyFormSubmit(editCompanyForm)">
    <mat-dialog-content>
      <fieldset>
        ...
      </fieldset>
    </mat-dialog-content>
    <mat-dialog-actions class="border-top">
      <button type="button" mat-button matDialogClose>Cancel</button>
      <button type="submit" mat-raised-button color="accent"
              [disabled]="!editCompanyForm.valid">Save changes</button>
    </mat-dialog-actions>
  </form>
</ng-template>

@Component({
  ...
})
export class AccountCompanyComponent {

  @ViewChild('editCompanyModal') editCompanyModal: TemplateRef<any>;
  private editCompanyDialogRef: MatDialogRef<TemplateRef<any>>;

  constructor(public dialog: MatDialog) {}

  // Dialog handling

  openCompanyDetailsDialog(): void {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.restoreFocus = false;
    dialogConfig.autoFocus = false;
    dialogConfig.role="dialog";

    this.editCompanyDialogRef = this.dialog.open(this.editCompanyModal, dialogConfig);

    this.editCompanyDialogRef.afterClosed().subscribe(result => {
      consoleOut('The dialog was closed...');
    });
  }

  closeCompanyDetailsDialog() {
    this.editCompanyDialogRef.close();
  }

  editCompanyFormSubmit(form: NgForm) {
    if (!form.valid) {
      return false;
    }
    // Save company data
  }

---

---

Utiliza Nuestro Buscador