0

Here is an angular mat table with pagination

 <table mat-table [dataSource]="dataSource" matSort>             
  <!-- Name Column -->
              <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef mat-sort-header class="fnc-table-col-header"> Name </th>
                <td mat-cell *matCellDef="let row;let i= index;" class="fnc-table-content"> 
                       <mat-radio-button name="allLists" (click)="$event.stopPropagation();listselected(row)" [checked]="i==0"> </mat-radio-button>   
            {{row.name}} </td>
              </ng-container>
</table>
<mat-paginator #listinfo [pageSizeOptions]="[5, 10, 25, 100]" ></mat-paginator>

when i select a radio button, this code invokes a function name 'listselected()' , and when user traverse between pages in pagination, the radio button is being checked for first element, now my usecase deals with triggering the 'listselected' function for the first selected radio button when use moves pages

Lisa
  • 655
  • 3
  • 10
  • 34
  • add `$event.preventDefault();` to the click event too. Like this: `(click)="$event.stopPropagation();listselected(row);$event.preventDefault();"` – michal.jakubeczy Apr 01 '20 at 07:02
  • @michal.jakubeczy thanks, but i want something like... if i == 0 : listselected (row) && check the radio button – Lisa Apr 01 '20 at 07:10
  • if I understand correctly you want to trigger `listSelected` only for the first element and also want to have only first element selected. then it might be fine to do it like this: ` ` .... you just display – michal.jakubeczy Apr 01 '20 at 07:16
  • no , it was not that what i wanted, i want the function to be called whenever a radio button is selected (not alone for 1st element but for all the elements if it is checked)and whenever pagination changes , call the function for the first selected element – Lisa Apr 01 '20 at 07:46

0 Answers0