Pass index value of button to a popover component - html

Question

I'm a beginner in angular and currently using angular 9 for my project.I have a component called play-game and it has a set of buttons.
play-game.component.html
<div class="container">
<div [formGroup]="seatsFormGroup">
<div formArrayName="seatsArray" *ngFor="let seat of seats;let idx = index" id="seat-{{idx}}" class="col-sm-4 ">
<label [ngbPopover]="popOver" popoverTitle="Pop title" class="table-player-seat-button" (click)="sit(idx)">{{seat.displayName? seat.displayName: "Sit "+ idx}}</label>
<ng-template #popOver>
<app-seat-modal></app-seat-modal>
</ng-template>
</div>
</div>
</div>
And I have a separate component for my popover as follows
seat-modal.component.html
<h4 class="modal-title">Seat{{seat}}</h4>
<button type="button" class="close" data-dismiss="modal" (click)="hide()">×</button>
<form [formGroup]="formRequestSeat" (submit)="join(seat)">
<div>
<button type="submit" class="button-request-seat">Request The Seat</button>
</div>
</form>
seat-modal.component.ts
import { Component, OnInit } from '#angular/core';
import {NgbModal, ModalDismissReasons} from '#ng-bootstrap/ng-bootstrap';
import {FormBuilder, FormGroup, Validators} from '#angular/forms';
import { SocketService} from '../../_services/socket.service';
import {AlertService} from '../../_services/alert.service';
import {ActivatedRoute, Router} from '#angular/router';
#Component({
selector: 'app-seat-modal',
templateUrl: './seat-modal.component.html',
styleUrls: ['./seat-modal.component.less']
})
export class SeatModalComponent implements OnInit {
formRequestSeat: FormGroup;
socket;
seat;
showModal: boolean;
screenName = '';
constructor(private socketService: SocketService,
private modalService: NgbModal,
private formBuilder: FormBuilder,
private alertService: AlertService,
private router: Router,
private activatedRoute: ActivatedRoute) { }
ngOnInit(){
this.formRequestSeat = this.formBuilder.group({
seatRequest: ['', Validators.required]
});
}
hide(){
this.modalService.dismissAll();
}
join(seat){
const self = this;
const tableToken = localStorage.getItem('tableToken');
const userToken = localStorage.getItem('userToken');
self.socket = self.socketService.init(userToken, tableToken);
self.socket.emit('join', {tableToken, seat}, (gameObject) => {
if (gameObject.error === null) {
self.alertService.success(gameObject.message, true);
}
else {
self.alertService.error(gameObject.message, true);
}
self.hide();
});
}
}
Earlier I have used a modal popup instead of popover. I could get the idx of the button to the popup modal but I have no idea how to pass idx to my popover.Please help

Answer 1

<div class="container">
<div [formGroup]="seatsFormGroup">
<div formArrayName="seatsArray" *ngFor="let seat of seats;let idx = index" id="seat-{{idx}}" class="col-sm-4 ">
<label [ngbPopover]="popOver" popoverTitle="Pop title" class="table-player-seat-button" (click)="sit(idx)">{{seat.displayName? seat.displayName: "Sit "+ idx}}</label>
<ng-template #popOver>
<app-seat-modal [btnIdx]="idx"></app-seat-modal>
</ng-template>
</div>
</div>
</div>
in app-seat-modal component
import { Component, OnInit } from '#angular/core';
import {NgbModal, ModalDismissReasons} from '#ng-bootstrap/ng-bootstrap';
import {FormBuilder, FormGroup, Validators} from '#angular/forms';
import { SocketService} from '../../_services/socket.service';
import {AlertService} from '../../_services/alert.service';
import {ActivatedRoute, Router} from '#angular/router';
#Component({
selector: 'app-seat-modal',
templateUrl: './seat-modal.component.html',
styleUrls: ['./seat-modal.component.less']
})
export class SeatModalComponent implements OnInit {
#Input() btnIdx : number;
formRequestSeat: FormGroup;
socket;
seat;
showModal: boolean;
screenName = '';
constructor(private socketService: SocketService,
private modalService: NgbModal,
private formBuilder: FormBuilder,
private alertService: AlertService,
private router: Router,
private activatedRoute: ActivatedRoute) { }
ngOnInit(){
this.formRequestSeat = this.formBuilder.group({
seatRequest: ['', Validators.required]
});
}
hide(){
this.modalService.dismissAll();
}
join(seat){
const self = this;
const tableToken = localStorage.getItem('tableToken');
const userToken = localStorage.getItem('userToken');
self.socket = self.socketService.init(userToken, tableToken);
self.socket.emit('join', {tableToken, seat}, (gameObject) => {
if (gameObject.error === null) {
self.alertService.success(gameObject.message, true);
}
else {
self.alertService.error(gameObject.message, true);
}
self.hide();
});
}
}