I'm trying to launch a ngx-modal when clicking a serie of tr
in an angular table and pass data that the ngx-modal must work with. For each cicked tr
, the modal must have different values passed in.
this is the method in the "main" .ts component that launches the modal:
openModal(dummyItem) {
const initialState = {
clientId: dummyItem.clientId,
clientName: dummyItem.clientName,
facType: dummyItem.type,
localCode: dummyItem.localCode,
from: dummyItem.from,
to: dummyItem.to,
localName: dummyItem.localName,
class: "modal-lg"
};
this.bsModalRef = this.modalService.show(DetalleFacturaPopUpComponent, {
initialState,
backdrop: "static",
keyboard: false
});
}
in the main template, the method "openModal(dummyItem)" is attached to each tr
as a click
event using a *ngFor
, so that for each row, the modal is launched with different data passed in, this way:
<tr *ngFor="let dummyItem of facturas" (click)="openDetalleFacturaAmpliado(dummyItem)" >
<td>{{ dummyItem.numFac }}</td>
<td class="text-center">{{ dummyItem.clientId}}</td>
<td class="text-center">{{ dummyItem.clientName}}</td>
<td class="text-center">{{ dummyItem.localCode}}</td>
<td class="text-center">{{ dummyItem.localName}}</td>
<td class="text-center">{{ dummyItem.from}}</td>
<td class="text-center">{{ dummyItem.to}}</td>
<td class="text-center">{{ dummyItem.type}}</td>
</tr>
The thing is that I don't know how to grab this data in the modal .ts file.
The following piece of code is from "DetalleFacturaPopUpComponent.ts", which is the component launched in from the first one:
export class DetalleFacturaPopUpComponent implements OnInit {
ngOnInit() {
console.log(initialState.clientId)
}
but of course, this fails. "initialState" property is not recognized at all. I populated it in the main .ts as a but I can't manage to figure out how to grab it and use it.
I want to be able to fill a form (the template of the modal is a form) with the values of the properties of the variable "initialState" I passed in to the modal component, but I can't manage to do it make use it... if I could at least console log one of the values, I could make the rest of the app I'm trying to develop.
May you help me figure out how can I make use of the data passed to the ngx-modal? Thanks.