Search code examples
javascripthtmlangulartypescriptreset

Angular - Clear Input text when click on "x"

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? enter image description here

  <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 = '';

  }
}
Solution

  • 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 = ''; }