CODEWITHSUNDEEP
angularangular-directive
L. Faros
L. Faros

Reputation: 1992

Angular ngModelChange and button to clear the input

I have a text input used to search data on the backend.

When something is entered in the input, a clear button appear in order to reset the field value. If I enter or remove characters in the input, I have a log indicating the content of the input.

However, if I click the button, the log is not triggered (I need it to query the unfiltered dataset from the server)

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  search = null;
    public searchSeries(value: string) {
      console.log(value); // this log is not called when the input is cleared via the button
  }
}

// app.component.html
<input type="text" placeholder="Search" (ngModelChange)="searchSeries($event)" [(ngModel)]="search">
<button *ngIf="search"  aria-label="Clear" (click)="search=null">
    clear
</button>

How could I have the searchSeriesfunction called when clearing the input via the clear button ?

Here is a stackblitz example showing the problem : https://stackblitz.com/edit/angular-yk7wbc

Upvotes: 0

Views: 1271

Answers (2)

JDunken
JDunken

Reputation: 463

You can call functions with the ng click directive, like so...

<button *ngIf="search"  aria-label="Clear" (click)='someFunctionInTheComponentsTsFile()'>
    clear
</button>

You can then do what you like...

someFunctionInTheComponentsTsFile() {
    // do stuff
}

Upvotes: 2

ferhado
ferhado

Reputation: 2594

Use searchSeries function on click the clear button:

<button *ngIf="search"  aria-label="Clear" (click)="searchSeries(search); search=null">
    clear
</button>

Upvotes: 1

Related Questions