CODEWITHSUNDEEP
angular
pandith padaya
pandith padaya

Reputation: 1963

Angular element supress (change) event from firing under a certain condition

I have the following two elements in Agnular

         <input type="text" (change)="UpdateDetails()"
                [(ngModel)]="name"/>


            <i (click)="name=''; $event.stopPropagation(); "></i>

The <i> element is styled in a way to show the clear (X) icon on top of the input. Its purpose it to clear the contents of what the user is typing in.

Consider the following scenario

  1. User navigates to the input box and types in something and decides to clear it with the (X) icon.
  2. User clicks the (X) icon. This clears the icon, however since there is a (change) event on the input this also triggers the UpdateDetails method, which I don't want it to do.

So basically what I'm trying to do is to suppress the change event when the user clicks the (x) icon to clear the input text content.

I tried $event.stopPropagation() but I don`t think this works in this scenario.

Upvotes: 0

Views: 484

Answers (2)

Minal Shah
Minal Shah

Reputation: 1476

You can resolve this issue by using ngModelChange.

So get the input from the .ts file using [ngModel].

Please refer the following code:

<input type="text" #name  (ngModelchange)="UpdateDetails()"
                [ngModel]="name"/>

Upvotes: 0

Eliseo
Eliseo

Reputation: 57919

Try

<input type="text" (input)="name && UpdateDetails()"
            [(ngModel)]="name"/>

Or using an auxiliar variable onclear

<input type="text" (input)="!onclear && UpdateDetails();onclear=false;"
            [(ngModel)]="name"/>

        <i (click)="onclear=true;name='';"></i>

NOTE: (change) happens when lost focus, (input) happens any change in input

Upvotes: 1

Related Questions