How to set button function according to table data in angular?-CodePudding

I have created an employee request table in angular which has some data. And according to the data I want to make buttons which accept and reject the request.

Employee Request Table example -

name    |     created on      |      Type      |   Action

ram     |    02/07/2022       |    Leave       |   [accept]  [reject]
rohit   |    05/07/2022       |    CompOff     |   [accept]  [reject]
shyam   |    06/07/2022       |    CompOff     |   [accept]  [reject]
kunal   |    07/07/2022       |    Leave       |   [accept]  [reject]

[accept] [reject] - these are two buttons to accept or reject the request.

Is it possible to make one button to accept/reject both the request (leave,compOff) ? because after clicking the button (accept or reject) both have a different API which will do modification in database.

Angular code -

 <tr>
          <th>Name</th>
          <th>Created on</th>
          <th>Type</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody >
          <tr *ngFor="let user of users">
              <td>{{user.name}}</td>
              <td>{{user.createdon}}</td>
              <td>{{user.type}}</td>
              <td>
                  <button  (click)="accept()"></button>
                  <button  (click)="reject()"></button>
              </td>
          </tr>

How to handle both the request(leave/compoff) by one button? Is it possible to use to get table data in accept() function where I can write something like this ....

accept(){
type === 'leave' ? function1() : function2(); 
.
.

}

CodePudding user response：

Yeah, why dont you prefer a logic similar to confirm alert/confirm dialog. [link] https://stackblitz.com/edit/primeng-confirmdialog-demo

CodePudding user response：

You can pass user to your function and user it's attributes, if the user has a id then you can send "user id" to the API to indicate the user to accept or reject.

      <tbody >
          <tr *ngFor="let user of users">
              <td>{{user.name}}</td>
              <td>{{user.createdon}}</td>
              <td>{{user.type}}</td>
              <td>
                  <button  (click)="accept(user)"></button>
                  <button  (click)="reject(user)"></button>
              </td>
          </tr>

accept(user:any){
  if(user.type === 'leave') function1();
  else function2(); 
  .
  .
}

reject(user:any){
  .
  .
}