CODEWITHSUNDEEP
javascriptjqueryangulartypescript
Sabeeh Ul Haq
Sabeeh Ul Haq

Reputation: 87

Get ID of the specific button that is clicked.

I have a table and inside the table one of the column contains a button and for each row the button id will be different. The id is data-binded using angular {{}}. on the button element i have a function called MarkasRead() that will be called on click. When i try to retrieve the id for it it shows undefined and i really need that id inside the function call to do more work.

Listed is the table code and function call.

<table *ngIf="receivedMessages?.length > 0;else noReceivedMessages" class="table table-responsive table-bordered animated bounceIn" style="table-layout: fixed;width:100%; word-wrap:break-word;">
                  <thead>
                    <tr>
                      <th></th>
                      <th>From</th>
                      <th>Date</th>
                      <th>Subject</th>
                      <th></th>
                      <th></th>


                    </tr>
                  </thead>
                  <tbody *ngFor="let message of receivedMessages">
                    <tr *ngIf="message.mDeleted == '0' ">
                      <td><i style="color:red" class="fa fa-exclamation" aria-hidden="true"></i></td>
                      <td> {{message.messageFrom}}</td>
                      <td> {{message.createdDate}}</td>
                      <td> {{message.subject}}</td>
                      <td><a style="width:100%;background-color:tomato;color:white" [routerLink]="['/message/'+message.$key]" href="" class="btn">
                        <i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
                      <td> <button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead()">Mark as Read</button>
                      </td>
                    </tr>

                  </tbody>
                </table>






MarkasRead(){

      alert(this.id); // or alert($(this).attr('id'));

  }

Upvotes: 1

Views: 130

Answers (6)

RedWolf
RedWolf

Reputation: 24

To do this, you need to pass the id as a parameter to the MarkasRead function as "MarkasRead(message.$key)" and then define the function underneath as:

function MarkasRead(value)
{
  alert(value);
}

Upvotes: 1

Mitul
Mitul

Reputation: 3427

<table *ngIf="receivedMessages?.length > 0;else noReceivedMessages" class="table table-responsive table-bordered animated bounceIn" style="table-layout: fixed;width:100%; word-wrap:break-word;">
              <thead>
                <tr>
                  <th></th>
                  <th>From</th>
                  <th>Date</th>
                  <th>Subject</th>
                  <th></th>
                  <th></th>


                </tr>
              </thead>
              <tbody *ngFor="let message of receivedMessages">
                <tr *ngIf="message.mDeleted == '0' ">
                  <td><i style="color:red" class="fa fa-exclamation" aria-hidden="true"></i></td>
                  <td> {{message.messageFrom}}</td>
                  <td> {{message.createdDate}}</td>
                  <td> {{message.subject}}</td>
                  <td><a style="width:100%;background-color:tomato;color:white" [routerLink]="['/message/'+message.$key]" href="" class="btn">
                    <i class="fa fa-arrow-circle-o-right"></i> Details</a></td>
                  <td> <button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead({message.$key)">Mark as Read</button>
                  </td>
                </tr>

              </tbody>
            </table>

MarkasRead(id) { alert(id) }

Upvotes: 0

zackhalil
zackhalil

Reputation: 533

try changing

(click)="MarkasRead()"

to

(click)="MarkasRead(event)"

And using function

function MarkasRead(e) {
   alert(e.target.id);
}

Upvotes: 0

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

<button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead($event)">Mark as Read</button>


MarkasRead(event){

 var target = event.target || event.srcElement || event.currentTarget;
 var idAttr = target.attributes.id;
}

Upvotes: 1

brk
brk

Reputation: 50291

You can do like this.Pass the $event object from the button event handler

<button id="{{message.$key}}" *ngIf="message.readStatus == '0'" type="submit" class="btn btn-success" (click)="MarkasRead($event)">Mark as Read</button>

In component 

MarkasRead(event) {
    var target = event.target || event.srcElement || event.currentTarget;
    var elemId = target.attributes.id;
  }

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can define a parameter at MarkasRead function and pass this

function MarkasRead(el) {
  alert(el.id)
}


(click)="MarkasRead(this)"

Upvotes: 0

Related Questions