0

Estoy implementando Angular material en mi proyecto, y veo que con los modals hay una particularidad y es que al parecer se debe crear un componente a parte para poder plasmar toda la estructura del modal, la pregunta es, se puede crear un modal directamente en un componente sin necesidad de realizar todo esto?

esta es la documentación de Angular Material y si se fijan en el component.ts esta la siguiente linea

 const dialogRef = this.dialog.open(DialogContentExampleDialog);

donde se hace el llamado a un componente para abrir su contenido, sin embargo solo quiero que plasme unas cosas que con bootstrap si puedo realizar sin problemas. Espero haberme hecho entender y les agradecería mucho su ayuda

3 respuestas 3

1

si puedes realizar algo como esto.

.html

<button (click)="abrirDialog(dialogTemplate)">Abrir dialog</button>
<ng-template #dialogTemplate>
 <h1>contenido del dialog</h1>
</ng-template>

y en el component

constructor(private dialog: MatDialog)

abrirDialog(templateRef) {
    let dialogRef = this.dialog.open(templateRef, {
        width: '250px' }
    });

    dialogRef.afterClosed().subscribe(result => {
        console.log('dialog cerrado');
    });
}

Saludos.

1

hola creo que en la documentación de bootstrap te puede ayudar a lo que quieres hacer creo quieres hacer algo asi no mira

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

0

Algunas referencias online indican que debes importar el modulo MatDialogModule en tu programa usando import { MatDialogModule } from '@angular/material/dialog' luego lo agregas al vector de importaciones imports: [ CommonModule, MatCardModule, MatDialogModule ] entonces configuras el dialogo de la aplicacion y luego en dialogo.module.ts

import { Component } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
 template: `
 <h1 mat-dialog-title>Hello There</h1>
 <div mat-dialog-content>
 <p>This Is a Simple Dialog</p>
 </div>
 <div mat-dialog-actions>
 <button mat-button (click)="close()">Close</button>
 </div>
`
})
export class SimpleDialogComponent {

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

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

mas informacion puedes encontrar en https://material.angular.io/components/dialog/overview

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.