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

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>