Angular material create dialog box in same component as existing functionality

Question

I am trying to add an Angular Material dialog box(just a title and yes/no) that gets called before my web service executes. The thing is that I do not want to create the dialogs HTML in a separate component. I need the dialogs HTML to be in the same file as my existing code. The dialog needs to open when I click on the callAPI button. Here is my existing component code

<mat-tab-group>
    <mat-tab label="Tab 1">
       <button mat-flat-button color="warn" (click)="callAPI()">Open Dialog</button>
    </mat-tab>
    <mat-tab label="Tab 2">
    </mat-tab>
</mat-tab-group>

callAPI() {
    this.http.get<any>('https://example.com/api').subscribe(data => {
      this.data = data;
      this.loading = false;
    },
    err => {
        this.loading = false;
    });
}

Answer 1

Update: I was not correct in my assumptions that the TemplateRef's type parameter was the component reference - in fact, it's actually the "data-binding context of the embedded view", as shown in the documentation for the TemplateRef#createEmbeddedView method:

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

Description:

Instantiates an embedded view based on this template, and attaches it to the view container.

Parameters:

context (type: C) The data-binding context of the embedded view, as declared in the usage.

---

You can pass in a template reference to 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.');
                }
            }
        })
    }