How to close Angular material dialog box?

Question

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.

I tried that same dialog box to the button id="btn" and it is closing successfully.

There are no errors coming.

main.component.html

<object id="svg-object" data="assets/svg/xxx.svg" type="image/svg+xml"></object>

<button mat-button id="btn">Launch dialog</button>

main.component.ts

ngOnInit() {
    this.myfunction();

    $('#btn').mouseover(() => {
      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',() => {
      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(() => {
               component.openDialog();
          });
        }
      });
    }, false);
}

DialogBoxComponent.ts

  constructor(public dialogRef: MatDialogRef<MainComponent>) {
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

DialogBoxComponent.html

<h3 mat-dialog-title>TOPIC</h3>
<div class="container">
  <div class="device-config-main-container d-flex flex-column">
  </div>
  <div mat-dialog-actions>
    <button mat-raised-button matDialogClose (click)="onNoClick()">Close</button>
  </div>
</div>

Below button hover dialog box closing is working successfully:

$('#btn').mouseover(() => {
  this.openDialog();
});

@halfer there is something wrong with the dialog box which I open inside myfunction(). I couldn't find the issue.. please help me to find this. — neomal, Jun 14 '20 at 10:52

score 5 · Accepted Answer · answered Sep 25 '20 at 04:23

You can do this while opening the dialog box, you need to pass one more param disableClose: false.

openDialog() {
    const dialogRef = this.dialog.open(DialogBoxComponent, {
      height: '100px',
      width: '450px',
      disableClose: false
    });
}

and if you wanted to close manually

closeDialog() {
    this.dialog.closeAll();
}

Muhammad Usman · Answer 2 · 2020-06-13T11:47:41.250

3

change

constructor(public dialogRef: MatDialogRef<MainComponent>)

to

constructor(public dialogRef: MatDialogRef<DialogBoxComponent>)

in DialogBoxComponent and consider to do it angular way instead of jquery i.e.

<button mat-button (mouseenter)="mouseEnter() ">Launch dialog</button>

mouseEnter() {
    this.dialogRef = this.dialog.open(DialogBoxComponent, {
       height: '100px',
       width: '450px',
    });
}

and in some cases if you want get reference of some ui element consider using ViewChild

edited Jun 13 '20 at 11:47

answered Jun 13 '20 at 11:42

Muhammad Usman

101
1
11

Actually I need to Identify the element in svg file and then call the popup when someone hover it.. The only way I found to identify svg element with css is using Jquery. That is why I'm calling my popup inside the jquery function as below. ``` – neomal Jun 13 '20 at 18:29

How to close Angular material dialog box?

2 Answers2