i am trying to get data from html table in angular.

component.html:

<div class="col-lg-6">
        <table style="width: 90%;">
          <tr>
            <th
              style="
                border-left-color: white;
                border-top-color: white;
              "
            ></th>
            <th class="t1">Name</th>
            <th class="t1">Issue Date</th>
            <th class="t1">Expiry Date</th>
            <th class="t1">Add License</th>
          </tr>
          <tr *ngFor="let licence of licencesImages">
            <!-- Licence Image -->
    
            <td>
              <img [src]="licence.path" style="max-width: 30px" />
            </td>
            <!-- Licence Name -->
            <td>{{ getLicenceVehicleType(licence.name) }}</td>
            <!-- Licence Issue Date -->
            <td>
              {{ getLicenceDate(licence.issued_date) }}
            </td>
            <!-- Licence Due Date -->
            <td>{{ getLicenceDate(licence.due_date) }}</td>
            <!-- Add Licence -->
            <td>
              <i
                class="fa fa-plus-circle cursor-pointer"
                aria-hidden="true"
                style="color: green"
                (click)="onAddLicense(output)"
              ></i>
            </td>
          </tr>
        </table>
      </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

in component.ts:

  onAddLicense(output) {
    console.log(output)
  }

my case is different from mat-table, in each row i have a button related to this row.

how i can get data from this row on click on button?

i try to replace output by $event.target.valuebut not work.

CodePudding user response：

@op instead of doing like :

 <i
   class="fa fa-plus-circle cursor-pointer"
   aria-hidden="true"
   style="color: green"
   (click)="onAddLicense(output)"
  ></i>

do it like :

<i
   class="fa fa-plus-circle cursor-pointer"
   aria-hidden="true"
   style="color: green"
   (click)="onAddLicense(licence)"
  ></i>