I have a table with data displayed using ngFor. I need to display an individual row data in a modal on click. i can log it in console by passing the row as click argument but not able to pass it inside the modal.
Assuming the table data is being fetched from a service and the modal is a template reference which is in same component file as the table.
Here is a fiddle created https://stackblitz.com/edit/angular-xr8ud5
I have used angular 1.x and the data was passed through resolve. I am new to Angular and have never worked in ngBootstrap.
Any help is appreciated. Thanks
just need to store the selected row in a variable which we can then display on the HTML
in your stackblitz , change modal-basic.html to be:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tableRow of table" (click)="open(content, tableRow)">
<th scope="row">{{tableRow.id}}</th>
<td>{{tableRow.first}}</td>
<td>{{tableRow.last}}</td>
<td>{{tableRow.handle}}</td>
</tr>
</tbody>
</table>
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Details</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">
id:<u>{{selectedRow.id}}</u><br>
first:<u>{{selectedRow.first}}</u><br>
last:<u>{{selectedRow.last}}</u><br>
handle:<u>{{selectedRow.handle}}</u>
</div>
</ng-template>
<hr>
<pre>{{closeResult}}</pre>
in your stackblitz , change modal-basic.ts to be:
import {Component} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-basic',
templateUrl: './modal-basic.html'
})
export class NgbdModalBasic {
closeResult: string;
table = [
{
"id": 1,
"first":"Mark",
"last": "Otto",
"handle": "@mdo"
},{
"id": 2,
"first":"Jacob",
"last": "Thornton",
"handle": "@fat"
},{
"id": 3,
"first":"Larry",
"last": "the Bird",
"handle": "@twitter"
}
];
selectedRow;
constructor(private modalService: NgbModal) {}
open(content, tableRow) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
//console.log(tableRow)
this.selectedRow = {id:tableRow.id, first: tableRow.first, last:tableRow.last, handle:tableRow.handle};
}
}
Passing of data from your component to ngBoostrap modal can be done via Angular's 2-way binding . It is actually the very same way you carry out 2-way binding on Angular 1.x!
I have made a demo for you.
First, on your model-basic.ts, you define your model for the modal. Then, you assign the modalContent
model property with the table row data.
modalContent:undefined
.
.
open(content, tableRow) {
this.modalContent = tableRow
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
}
On your modal-basic.html, you can use the {{ ... }} template expression to display the individual properties of your model on your modal itself.
<ng-template #content let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Details</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">
id: {{ modalContent.id }}
<br>
first: {{ modalContent.first }}
<br>
last: {{ modalContent.last }}
<br>
handle: {{ modalContent.handle }}
</div>
</ng-template>
You may create variable for modal data in component: StackBlitz
Or you may create component for modal:
modal-basic.ts
openModal(dataToModal) {
const modalRef = this.modalService.open(ModalComponent);
modalRef.componentInstance.inputDataInModalComponent = dataToModal;
modalRef.result.then(() => {});
}, () => {});
}
modal.component.ts
export ModalComponent implements OnInit{
@Input() inputDataInModalComponent: any;
ngOnInit() {
console.log(inputDataInModalComponent);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.