Advanced TypeScript Programming Projects

Wrapping up by displaying the dialog

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 ...