CODEWITHSUNDEEP
javascriptangulartypescripteventsonchange
AlleXyS
AlleXyS

Reputation: 2598

Adding optional change event on html element and js function

I have an Angular popup component which is used for multiple types.

For types A and B I have an "action" section in footer, which is used to get results and close the popup. For type C, I want to close the popup when a checkbox is selected (so, here I need to use change event, but this is unusefull for types A and B).

html:

<ng-container matColumnDef="max">
   <th *matHeaderCellDef mat-header-cell>Max</th>
   <td *matCellDef="let row" [ngClass]="row.actions.maxDisabled ? 'disabled' : ''"
         mat-cell>
      <mat-checkbox (change)="onActionSelected(row)"
                    [(ngModel)]="row.actions.max"
                    [disabled]="row.actions.maxDisabled"></mat-checkbox>
   </td>
</ng-container>

ts:

onActionSelected(row: any): void {
   if (this.source !== 'C') {
      return;
   }

   const data = this.dataSource.data;
   const value = Helpers.getValue(data);

   this.dialogRef.close(value);
}

I added (change)="onActionSelected(row)" event on my template only for case C and is required to check in the method if source type is another than it.

I'm wondering if exists a solution more elegant to add the change event dynamically to the checkbox and remove verification from the method.

Upvotes: 1

Views: 35

Answers (1)

Geshode
Geshode

Reputation: 3764

You could add a condition to your change event, assuming that the row object contains the source property:

(change)="row.source !== 'C' && onActionSelected(row)"

Upvotes: 2

Related Questions