Pass index value of button to a popover component

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()">&times;</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();
      });
  }
}