By now, you have probably noticed that we haven't actually put any code in place to display the dialog or trigger AddImageService when the user closes the dialog. To do this, we are going to add the code in app.component.ts and make a minor adjustment to the related HTML.

Add a constructor that accepts a Material dialog and AddImageService:

constructor(private dialog: MatDialog, private addImage: AddImageService) {
}

We need to add a public method that our HTML template will bind to. We are going to call this ImportImage:

public ImportImage(): void {
}

The related change to our HTML template is to add the call to ImportImage to respond to the click event, via the (click) event binding, on our menu list item in app.component.html. Once again, we see Angular binding coming into play:

<a mat-list-item (click)="ImportImage()">Import image</a>

We are going to configure our dialog to behave in a certain way. We don't want the user to be able to automatically close it by pressing the Esc key. We want it to be automatically focused and to be 500 pixels wide:

const config = new MatDialogConfig();
config.disableClose = true;
config.autoFocus = true;
config.width = '500px';

Now, we can show our dialog using this configuration:

this.dialogRef = this.dialog.open(FileuploadComponent, config);

We want to be able to identify when the dialog is closed and automatically call our add image service—our add method—which will notify the transfer data service that the data must be sent to the client, and will also notify the page body that there is a new image to display:

this.dialogRef.afterClosed().subscribe(r => {
  if (r) {
    this.addImage.add(r);
  }
});

That's the last piece of code that we put in place. Our client code now has neatly segregated services and components that work in co-operation with our Material dialog. Our dialog looks like this when in use:

We have finished wiring our dialog into our Angular code. We have a fully working application that we can use to save images into our database.