In Angular click event handler does not working when we click on sorting or pagination.

subbu_palnati

At very first initial load of the page edit button is working fine, but when we click on sort or navigated different page edit functionality is not working.

<div class="mat-elevation-z8">
    <table datatable class="row-border hover" id="table" [dtOptions]="dtOptions" [dtTrigger]="dt"
           *ngIf="bookings && bookings.length > 0">
        <thead>
        <tr>
            <th class="sortingId-1">Guest Information</th>
            <th class="sortingClass" style="width:25% !important" >Date Submitted</th>
            <th class="sortingId" style="width:25% !important">Stateroom</th>
            <th class="sortingClass">Ticket ID</th>
            <th class="sortingId" style="width:25%; padding-left: 0px !important; padding-right: 19px !important;">Status</th>
            <th class="sortingId"></th>
        </tr>
        </thead>
        <tbody class="textdata">
        <tr *ngFor="let booking of bookings">
            <td><span
                    class="guest-info-span"> {{booking.firstName | titlecase }} {{booking.lastName | titlecase}}</span>
                <span class="guest-info-span-email">{{booking.emailAddress | lowercase}}</span></td>
            <td><span class="guest-info-span"> {{booking.orderedDate | dateFormatter}}</span> <span
                    class="guest-info-span-email">{{booking.orderedDate | timeFormatter}}</span></td>
            <td>{{booking.stateroom}}</td>
            <td>{{booking.ticketId}}</td>
            <td style="padding:8px 3px !important;width:200% !important;">{{booking.ticketStatus | titlecase}}</td>

** <td class="material-icons" style="color: #0097FE; padding-left: 60px" (click)="openDialog(booking.ticketId)">create</td>**
</tr>
</tbody>
</table>
</div>

kthorngren

See if this FAQ helps:
https://datatables.net/faqs/index#events

Kevin

subbu_palnati

Hi Kevin.. i didn't find any examples related to angular for this problem,

<td class="material-icons" style="color: #0097FE; padding-left: 60px" (click)="openDialog(booking.ticketId)">create</td>

    openDialog(item) {
        console.log("entered");
        const editDialog = this.dialog.open(DialogComponent, {
            data: {
                item
            }
        });

this is how i am handing this function, can you please someone help me how to solve this issue. it is working fine in the first page or without sorting but edit click is not working when we click on sort or naviagate to diffrent page

colin

As Kevin said, try using delegated events in your event listener (you haven't shown that code).

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin