[documentation] HotkeysHelpComponent example using MatDialog cannot be closed using the button

[Álvaro Martínez]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I find the current example in the README for the HotkeysHelpComponent a bit misleading. The "close" button in the component emits an event, but it doesn't close the MatDialog that is used in the example to display the component. I think this can be a bit confusing for newcomers.
I can think of two possible workarounds:

• Improve the example with the necessary steps to close the MatDialog when the dimiss event is fired
• Optionally injecting the MatDialog into the HotkeysHelpComponent so it supports the example out of the box.

constructor(
    private hotkeysService: HotkeysService,
    @Optional() private _dialog: MatDialog
){
    /* [...] */
    handleDismiss(){
        this._dialog?.close();
        /* [...] */
    }
}

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[Álvaro Martínez]

(I'd be happy to submit a PR if you're ok with either solution)

[Netanel Basal]

You can see what we did in the playground, and update the docs.