0

introducir la descripción de la imagen aquíespero puedan ayudarme, estoy varias intentando hacer esto, no soy programadora, mas conozco de java y todavia no le entiendo mucho el typescript, bueno aqui pueden ver el codigo https://stackblitz.com/edit/angular-79qxki-vqsruq?file=app%2Fdialog-overview-example.ts

Quisiera que aparesca el nombre seleccionado en la ventana modal, mas no consigo, espero puedan orientarme, muchas gracias.

voy a dar mas detalle: las clases las funciones estan en "dialog-overview-example.ts", la pagina principal en "dialog-overview-example.html", la pagina fluctuante o modal en "dialog-overview-example-dialog.html" y los estilos en "dialog-overview-example.css"

en la pagina de ts cree un array de usuarios, dado que tome de otro ejemplo, mas no importa mucho el nombre..

1
  • Debes pasar como parametro el elemento seleccionado al openDialog(), de esa forma recibes en el componente el valor; despues simplemente lo muestras en el modal reemplazando Hi {{usuario.nombre}} __ por __Hi {{data.name}} . Commented el 22 ene. 2019 a las 14:10

1 respuesta 1

1

Como estas! La interface DialogData es el nexo entre la ventana "padre" y la modal. En el ts seria asi:

 openDialog(user: any): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: user.id, animal: user.nombre}
});

y en el html

<mat-grid-list cols="3" rowHeight="2:1">
  <div *ngFor="let usuario of usuarios" (click)="openDialog(usuario)">
    <mat-grid-tile> {{usuario.nombre}}</mat-grid-tile>
      </div>
</mat-grid-list>

me falto el dialog!

<h1 mat-dialog-title>Hi {{data.animal}}</h1>
<div mat-dialog-content>
  <p>Usuario</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.name">
  </mat-form-field>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>

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.