title: How to close Angular material dialog box?
body: <p>I am using Angular 8. I am reading a svg file and find elements with style has stroke:none. Then open a dialog box whenever someone hover that element. Dialog box is opening but it is not closing when I click on outside or close button. </p>
  
  <p>I tried that same dialog box to the button id="btn" and it is closing successfully.</p>
  
  <p>There are no errors coming.</p>
  
  <p><strong>main.component.html</strong></p>
  
  <pre><code>&lt;object id="svg-object" data="assets/svg/xxx.svg" type="image/svg+xml"&gt;&lt;/object&gt;
  
  &lt;button mat-button id="btn"&gt;Launch dialog&lt;/button&gt;
  </code></pre>
  
  <p><strong>main.component.ts</strong></p>
  
  <pre><code>ngOnInit() {
      this.myfunction();
  
      $('#btn').mouseover(() =&gt; {
        this.openDialog();
      });
  }
  
  openDialog() {
      const dialogRef = this.dialog.open(DialogBoxComponent, {
        height: '100px',
        width: '450px',
      });
    }
  
  myfunction() {
      const component = this;
      const mySVG: any = document.getElementById('svg-object');
      mySVG.addEventListener('load',() =&gt; {
        svgDoc = mySVG.contentDocument;
  
        $(svgDoc).find('path').css('fill','fill-opacity','fill-rule','stroke').each(function() {
          const style = $(this).attr('style');
  
          if($(this).attr('style').includes('stroke:none')) {
            $(this).mouseover(() =&gt; {
                 component.openDialog();
            });
          }
        });
      }, false);
  }
  </code></pre>
  
  <p><strong>DialogBoxComponent.ts</strong></p>
  
  <pre><code>  constructor(public dialogRef: MatDialogRef&lt;MainComponent&gt;) {
    }
  
    onNoClick(): void {
      this.dialogRef.close();
    }
  </code></pre>
  
  <p><strong>DialogBoxComponent.html</strong></p>
  
  <pre><code>&lt;h3 mat-dialog-title&gt;TOPIC&lt;/h3&gt;
  &lt;div class="container"&gt;
    &lt;div class="device-config-main-container d-flex flex-column"&gt;
    &lt;/div&gt;
    &lt;div mat-dialog-actions&gt;
      &lt;button mat-raised-button matDialogClose (click)="onNoClick()"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below button hover dialog box closing is working successfully:</p>
  
  <pre><code>$('#btn').mouseover(() =&gt; {
    this.openDialog();
  });
  </code></pre>