How to clear the typed value which retains in the textbox even after selecting the option in taginput in angular 5

Question

I am using angular material to wrap the chips component with the combination of autocomplete component to get the tagInput component as a reusable component. Here everything is working fine, but the value whatever we type before selecting in the autocomplete optionlist is displaying even after the value is selected and converted as a chip. This is happening only for mouse click. Selection with Keyup.enter, it is not displaying the input whatever we typed, even after selection. But for the selection using mouse click, it is not clearing the I want to control it from component side(sq-taglist.ts). Here is the stackblitzLink. I tried with setValue and patchValue method from component also but didn't work.Please help me out in resolving this issue.Thanks in advance.

Answer 1

That's because you're probably acting on the wrong thing.

Here is a stackblitz showing you it works.

What I did is simple : I added the input to the selected function :

selected(event: MatAutocompleteSelectedEvent, input: HTMLInputElement) {

<input placeholder="New fruit..." #fruitInput ...
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, fruitInput)">

And at the end of the selected function :

input.value = '';