Soy nuevo en Angular. Y estoy seguro de que esta es una pregunta de novato, pero no pude encontrar la respuesta en ningún lado, así que aquí va:
De una API, obtengo algunos datos con múltiples proyectos. Tengo que mostrar información sobre esos proyectos en un tablero. Pero también tengo un botón para cada proyecto, que cuando se presiona, tiene que mostrar las URL de ese proyecto.
En el HTML, estoy haciendo un ngFor que funciona perfectamente para servir la plantilla html para la otra información. Pero no puedo hacer que funcione para el modal. Quiero cargar datos personalizados (de ese ngFor) en el modal
El problema es que la plantilla modal se encuentra en la parte inferior del HTML, por lo que los datos del ngFor original ya no están disponibles.
Todo lo que he logrado hacer es obtener el botón para tener una identificación. Pero, ¿cómo uso esa ID para recuperar información de la API?
HTML:
<div *ngFor="let project of projectData; index as i"> <button type="submit" id="myModal" style="background-color: #f27704; padding: 0px" class="btn btn-sm ModalLaunch" data-id="{{ project.id }}" (click)="open(content)" > Launch modal </button> <!-- some other repeatable HTML here --> </div> <ng-template #content let-modal> <div class="modal-header"> <h4 class="modal-title" id="modal-basic-title">URLs</h4> <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <!-- {{project.urls}}--> <div class="modal-footer"> <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button> </div> </div> </ng-template>Esta es la función abierta en el archivo app.component.ts
open(content) { this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then( result => { this.closeResult = `Closed with: ${result}`; }, reason => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; } ); } No pude encontrar una manera de colocar la plantilla modal dentro de ngFor para que los datos estén disponibles. Sé que debo hacer algo con el contenido, pero ¿dónde lo defino y cómo lo sirvo al modal?
necesita establecer el atributo de datos cuando abre el cuadro de diálogo
/** * */ opendialog(): void { const dialogRef = this.dialog.open(YourComponent, { width: '100%', // height: '1800', data: datatopass, });luego necesita ver que los datos en su componente recogen esto en el constructor
constructor( @Optional() public dialogRef: MatDialogRef<TickertagsComponent>, @Optional() @Inject(MAT_DIALOG_DATA) public data: typeofdatayoupassed, ) {}luego puede leer el valor de la propiedad de datos
EDITAR: lo siento, esto es para la biblioteca de material angular, busque aquí https://material.angular.io/components/dialog/overview
Entonces, esto está funcionando ahora. Tuve que obtener la identificación del elemento del botón con una función JS, luego pasarla a otra función que busca la API JSON para esa identificación del elemento y luego devolver los datos con innerHTML. ¡Gracias a todos los que leyeron y comentaron mi publicación!