CODEWITHSUNDEEP
angular6
nas
nas

Reputation: 2437

How to pass table row data to popup modal?

I am currently working on the update table row. I have a table with list of rows

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td><a (click)="editPopUp()">Edit</a></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td><a (click)="editPopUp()">Edit</a></td>
    </tr>
  </tbody>
</table>

On Edit click a modal will popup that contains table to edit the selected row. This editPopUp function shows up the modal.

ts

editPopUp(){
    this.modalOn = true;
}

modal

<app-dialog
    [showDialog]="modalOn"
    [titleText]="modalTitle"
    [hideNegative]="true"
    [hidePositive]="true"
    (closeButtonClicked)="this.resetModal()"
    [level]="1"
>
    <form
            [formGroup]="maintenanceProductTargetForm" *ngIf="maintenanceProductTargetForm"
            (ngSubmit)="editMaintenanceProduct(maintenanceProductTargetForm.value)"
        >
    <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td><input type="text" formControlName="first_name" name="first_name"></td>
            <td><input type="text" formControlName="last_name" name="last_name"></td>
            <td><a (click)="update()">Edit</a></td>
        </tr>
        </tbody>
    </table>
    </form>
</app-dialog>

I am not sure how to pass this row data to this popup? Any Help please

Upvotes: 0

Views: 2487

Answers (1)

Tej
Tej

Reputation: 193

<!--TableDataComponent.html-->

  <table>
    <tr>
       <th>id</th>
       <th>name</th>
    </tr>
    <tr *ngFor = "let data of dataList">
      <td>{{data.id}}</td>
      <td>{{data.name}}</td>
      <td><button (click) = "editPopUpmodal(data)">Edit</button></td>
    </tr>
  </table>

  <!--Modal Pop Up -->
   <div *ngIf="showModalPopUp">
        <input type="text" [(ngModel)] = "editData.id" />
        <input type = "text" [(ngModel)] = "editData.name" />
        <button (click) = "updateData(editData)" > Update </button>
   </div>

Imagine above is your code for table and pop-up (Kindly ignore that there is nothing specific to Modal, I just took an element to show as modal) which are in same component.html

//TypeScript

   editData:any = {};
   showModalPopUp : boolean = false;

    //Constructor, ngOnInit and so on will come

   editPopUpmodal = (data) => {
      this.showModalPopUp = true;
      this.editData = Object.assign(data);
   }

 updateData = (updatedData) => {
  //Call the API through the data service to update the object
}

Upvotes: 1

Related Questions