I have an Input field where user can enter text. I have a x symbol to the left of input field. I am trying to clear text when symbol is clicked but unable to do so. Also input tfFormInput is custom text from npm library

I have tried using ngModel but did not work for me

What should I add in remove method to make it work?

  <div class="placeholder"><input tfFormInput />
    </div>


    <div class="im-target-param-row-delete" (click)="remove()"  [(ngModel)]="searchValue">
        <div class="close-ctnr">
            <svg viewBox="0 0 10 10">
                <line x1="1" y1="1" x2="9" y2="9"/>
                <line x1="1" y1="9" x2="9" y2="1"/>
            </svg>
        </div>
    </div>

.ts

export class SearchComponent implements OnInit {

  searchValue:string = '';


 removeSelectedSpecification(){
    this.searchValue = '';

  }
}

I have an Input field where user can enter text. I have a x symbol to the left of input field. I am trying to clear text when symbol is clicked but unable to do so. Also input tfFormInput is custom text from npm library

I have tried using ngModel but did not work for me

What should I add in remove method to make it work?

  <div class="placeholder"><input tfFormInput />
    </div>


    <div class="im-target-param-row-delete" (click)="remove()"  [(ngModel)]="searchValue">
        <div class="close-ctnr">
            <svg viewBox="0 0 10 10">
                <line x1="1" y1="1" x2="9" y2="9"/>
                <line x1="1" y1="9" x2="9" y2="1"/>
            </svg>
        </div>
    </div>

.ts

export class SearchComponent implements OnInit {

  searchValue:string = '';


 removeSelectedSpecification(){
    this.searchValue = '';

  }
}

• javascript
• html
• angular
• typescript
• reset

3 Answers 3

NgModel should be on input like below.

<div class="placeholder"><input tfFormInput [(ngModel)]="searchValue"/>
    </div>


    <div class="im-target-param-row-delete" (click)="remove()">
        <div class="close-ctnr">
            <svg viewBox="0 0 10 10">
                <line x1="1" y1="1" x2="9" y2="9"/>
                <line x1="1" y1="9" x2="9" y2="1"/>
            </svg>
        </div>
    </div>


remove() { this.searchValue = ''; }

you could try something like this. move the searchValue to the input element.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" placeholder="Search..." [(ngModel)]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,
})
export class App {
  searchValue:string = null;
  clearSearch() { 
    this.searchValue = '';
    console.log(this.searchValue.length, this.searchValue, typeof(this.searchValue));
  }
} 

try like this:

html file:

<div>
       <input type="text" placeholder="Search..." [(ngModel)]="searchValue">
       <button (click)="remove()">X</button>
</div>

ts file:

export class SearchComponent implements OnInit {

  searchValue:string = '';
    
 remove(){
    this.searchValue = '';

  }
}