CODEWITHSUNDEEP
htmlangular
Paul Schwartzberg
Paul Schwartzberg

Reputation: 81

angular component html table row button - click event handler needs to change text of button

I have an employee angular componenent that looks as below (see the HTML part below). The component loads a list of employees .

In the html i interate through the list of "employees" and create also a button in each row. For each employee.

The button is to show further details of the employee, when his/her row is clicked. I would though like like to change the text of the row button when it is clicked. And not all the row buttons (which is what my code is currently doing). But the button text is bound to the component class {{buttonText}} - this goes for all rows - somehow I think i need to give each button a unique name and then in the click event handler - and in its implementation in the Typescript code set that buttons text (but now of only the single row button that was clicked) - to say "Hide Details) (instead of "Show Details").

This solution escapes me - since the event handler in the class component, "ShowHideEmployedDetails(row_no)", now needs to access a dom item of its view.

Any ideas?

<tbody>
    <tr *ngFor="let emp of employees; let row_no = index ">
      <!-- <td>{{emp.id }}</td> -->
      <!-- <td><a [routerLink]="['/emp',emp.id]">{{emp.id }}</a></td> -->
      <td (click)="showDetails(emp.id)" class="mouse" >{{emp.id}}</td>
      <td>{{emp.name | empTitle:emp}}</td>
      <td>{{emp.gender}}</td>
      <td><button name="buttonNr{{row_no}}" (click)="ShowHideEmployedDetails(row_no)">
        {{buttonText}}</button></td>
    </tr>
  </tbody>


import { Injectable } from '@angular/core';
import {Employee} from  './employee/employee'

@Injectable()
export class EmployeeDataService {

  constructor() { }
  getEmployees(): Employee[] {
    return[
       {id:101,gender:'male',name:'Jack',address:'Dubai City', salary:4000, hourlyWage:'4000'  },
       {id:102,gender:'male',name:'Pater',address:'Dubai City', salary:4000, hourlyWage:'4000'  },
       {id:103,gender:'female',name:'Ankita',address:'Dubai City', salary:4000, hourlyWage:'4000'  },
       {id:104,gender:'female',name:'Rose',address:'Dubai City', salary:4000, hourlyWage:'4000'  }
    ];
  }

  
}

import { Component, OnInit } from '@angular/core';
import { EmployeeDataService } from '../employee-data.service';
import { Employee } from './employee';
@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {

  employees: Employee[];
  status:boolean=false;
  index:number;
  id:number;
  diff:number
  buttonText: string = "Show Details";


  constructor(private _empService:EmployeeDataService) { }

  ngOnInit() {
     this.employees = this._empService.getEmployees();
  }

  showDetails(id){
   this.id=id;
   this.status=true;

  }

  ShowHideEmployedDetails(id){
    this.index= id;
    this.status= !this.status;
    this.buttonText = this.status ? "Hide Details" : "Show Details";

  }

}


<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Gender</th>
      <th>Details</th>
      <!-- <th>Address</th>
      <th>Salary</th>
      <th>Hourly average</th> -->
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let emp of employees; let row_no = index ">
      <!-- <td>{{emp.id }}</td> -->
      <!-- <td><a [routerLink]="['/emp',emp.id]">{{emp.id }}</a></td> -->
      <td (click)="showDetails(emp.id)" class="mouse" >{{emp.id}}</td>
      <td>{{emp.name | empTitle:emp}}</td>
      <td>{{emp.gender}}</td>
      <td><button name="buttonNr{{row_no}}" (click)="ShowHideEmployedDetails(row_no)">
        {{buttonText}}</button></td>
    </tr>
  </tbody>
</table>
<br/>
<br/>

<br/>
<br/>
<div *ngIf="status">
    <table  class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>Address</th>
                <th>Salary</th>
                <th>Hourly average</th>
              </tr>
        </thead>
        <tbody>
                <tr *ngIf="status">
                           <td>{{employees[index].id}}</td>
                           <td>{{employees[index].name}}</td>
                           <td>{{employees[index].gender}}</td>
                           <td>{{employees[index].address}}</td>
                           <td>{{employees[index].salary}}</td>
                           <td>{{employees[index].hourlyWage}}</td>
                </tr>
        </tbody>
      </table>

</div>

Upvotes: 0

Views: 3230

Answers (1)

Reza
Reza

Reputation: 19843

If I get your question correctly, you want to show 'Hide Details' or 'Show Details' based on currently record if you clicked on

if yes, it's easy

Have two button on each row, with fixed labels, when click on show keep id of currently showing record, and add *ngIf on each buttons like *ngIf="emp.id === currentId" for hide button and *ngIf="emp.id !== currentId" for show button

Upvotes: 0

Related Questions