How can I use material dialog as web-component to use it in the angular app

I am trying to make a material dialog as a web-components using angular elements.

Opening a dialog in angular material needs to know the name of the dialog component DialogComponent. For eg.

  openDialog(): void {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '250px',
    });
  }

Now I am wondering how does the angular app know about the DialogComponent name that it want to reference to. First it would showed an error while i start the app since it cannot find the DialogComponent. Is there a way to have this implementation as web-component?