How to display specific row data in dialog box using Angular 9? - html

Question

Below I have written on for the open dialog method in the component
import { Component, OnInit } from '#angular/core';
import { HttpClient } from '#angular/common/http';
import { AuthService } from '../_services/auth.service';
import { AlertifyService } from '../_services/alertify.service';
import { ModalService } from '../_modal';
#Component({
selector: 'app-view-customer',
templateUrl: './ViewCustomer.component.html',
styleUrls: ['./ViewCustomer.component.css']
})
export class ViewCustomerComponent implements OnInit {
bookings: any;
bodyText: string;
constructor(private authService: AuthService, private http: HttpClient, private alertify: AlertifyService
, private modalService: ModalService) { }
ngOnInit() {
this.Bookings();
console.log(this.Bookings());
this.bodyText = 'This text can be updated in modal 1';
}
openModal(id: string) {
this.modalService.open(id);
}
closeModal(id: string) {
this.modalService.close(id);
}
Bookings() {
this.http.get('http://localhost:5000/api/Book/').subscribe(response => {
this.bookings = response;
console.log(this.bookings);
}, error => {
console.log(error);
});
}
}
Below I've included the template.
I'm trying to make the first button show the first data displayed the second button displaying the second data.
Currently, I have the dialog displaying all the data whenever the user clicks on both of the buttons.
<h1>List of reservations</h1>
<div>
<p *ngFor= "let booking of bookings">
{{booking.customers.firstName}},
{{booking.id}}, {{booking.date}},
{{booking.id}},{{booking.tableNumber}}
{{booking.id}},{{booking.additionalInfo}}
</p>
<button (click)="openModal('custom-modal-2')">Open Modal 2</button>
<button (click)="openModal('custom-modal-3')">Open Modal 3</button>
</div>
<p>
</p>
<div>
<p>{{bodyText}}</p>
<button (click)="openModal('custom-modal-1')">Open Modal 1</button>
<button (click)="openModal('custom-modal-2')">Open Modal 2</button>
</div>
<jw-modal id="custom-modal-1">
<h1>A Custom Modal!</h1>
<p>Home page text: <input type="text" [(ngModel)]="bodyText" /></p>
<button (click)="closeModal('custom-modal-1');">Close</button>
</jw-modal>
<jw-modal id="custom-modal-2">
<h1 style="height:100px">A Tall Custom Modal!</h1>
<p *ngFor= "let booking of bookings">
{{booking.id}}, {{booking.date}},
{{booking.id}},{{booking.tableNumber}}
{{booking.id}},{{booking.additionalInfo}}
</p>
<button (click)="closeModal('custom-modal-2');">Close</button>
</jw-modal>
<jw-modal id="custom-modal-3">
<h1 style="height:100px">second one hhaha</h1>
<button (click)="closeModal('custom-modal-3');">Close</button>
</jw-modal>
<!-- <p *ngFor= "let customers of bookings ">
{{booking.id}}, {{bookings.firstName}}
{{booking.customerId}}, {{booking.FirstName}}
</p>
<p>hello</p> -->
<p>{{ bookings[0]?.customers[0]?.Color?.Name }}</p>
what do I need to change below in the modal service?
import { Injectable } from '#angular/core';
#Injectable({ providedIn: 'root' })
export class ModalService {
private modals: any[] = [];
selectedBooking: any;
bookings: any;
add(modal: any) {
// add modal to array of active modals
this.modals.push(modal);
}
remove(id: string) {
// remove modal from array of active modals
this.modals = this.modals.filter(x => x.id !== id);
}
open(id: string) {
// open modal specified by id
const modal = this.modals.find(x => x.id === id);
modal.open();
}
close(id: string) {
// close modal specified by id
const modal = this.modals.find(x => x.id === id);
modal.close();
}
}
if you look at the image it shows that whenver i click on open modal button 2 it should only show emma's detail in the dialog box but it shows Tommy's details with Emma's detail.
image 1
iamge 2

Answer 1

That is because you are showing all the records in the modal. Here you are looping through all of them (bookings) in displaying them:
<jw-modal id="custom-modal-2">
<h1 style="height:100px">A Tall Custom Modal!</h1>
<p *ngFor= "let booking of bookings">
{{booking.id}}, {{booking.date}},
{{booking.id}},{{booking.tableNumber}}
{{booking.id}},{{booking.additionalInfo}}
</p>
<button (click)="closeModal('custom-modal-2');">Close</button>
</jw-modal>
If ModalService is something you created in your project (I mean not from a node module) then you can declare a variable there, set that when the button is clicked and use it in the modal. Something like,
export class ModalService {
selectedBooking: any;
.
.
}
Component HTML
<button (click)="openModal(booking)">Open Modal</button>
Component TS
openModal(booking: any) {
this.modalService.selectedBooking = booking;
this.modalService.open();
}
Modal HTML
<jw-modal id="custom-modal-2">
<h1 style="height:100px">A Tall Custom Modal!</h1>
{{selectedBooking.id}}, {{selectedBooking.date}},
{{selectedBooking.id}},{{selectedBooking.tableNumber}}
{{selectedBooking.id}},{{selectedBooking.additionalInfo}}
</p>
<button (click)="closeModal('custom-modal-2');">Close</button>
</jw-modal>