Dialog modal closes instantly whit Angular Material

Question

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'
    });
}

Answer 1

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>