Dialog modal closes instantly whit Angular Material

4
votes

Can someone tell me why when I click the Crear Proyecto button, the modal opens but then closes instantly?

https://stackblitz.com/edit/angular-gsgmu8?embed=1&file=app/portafolio/portafolio.component.ts

I am inserting the content of a component within the modal. I'm using Angular material.

portafolio.component.ts

import { CrearProyectoComponent } from '../crear-proyecto/crear-proyecto.component';
import { MatDialog } from '@angular/material';


constructor(public dialog: MatDialog) { }

openAddModal() {
 let dialogRef = this.dialog.open(CrearProyectoComponent, {
        width: '600px'
    });
}
2
angulartypescriptangular-material

2 Answers

7
votes

You are using a a tag, which means, when you click the 'button', it's trying to navigate to with href, so your app is reinialized. You could change the tag to a proper (mat)button instead:

<button class="btn btn-primary" (click)="openAddModal()">
  Crear Proyecto <i class="fas fa-plus ml-2"></i>
</button>
3
votes

Basically, you open the modal and the href causes to navigate to "home" and essentially doing a page refresh.

Remove href="" from your link:

<a class="btn btn-primary" (click)="openAddModal()">Crear Proyecto
        <i class="fas fa-plus ml-2"></i></a>

Here is the updated link.