have mat-autocomplete not replace but add value

Question

I know that with the onSelectionChange() from the mat-option of the mat-autocomplete i can do something when an option is selected but what i want is for the autocomplete to ADD the value of the mat-option to the input instead of replace its content.

Example:

input: "hello"
click mat option " world"
input: "hello world"

How do i accomplish this without kepping tabs on the form value and stocking its previous value and putting it back (since that just seems like a bad workaround)?

<mat-form-field class="w-100">
   <textarea [matAutocomplete]="auto" [value]="hello" matInput></textarea>
   <mat-autocomplete #auto="matAutocomplete" >
      <mat-option [value]="world">
         world
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2019-09-03T10:35:57

My workaround is to always prepend the option value with the current input value

<mat-form-field class="w-100">
   <textarea [matAutocomplete]="auto" [value]="hello" matInput></textarea>
   <mat-autocomplete #auto="matAutocomplete" >
      <mat-option [value]="hello + ' ' + world">  <<=== modified 
         world
      </mat-option>
   </mat-autocomplete>
</mat-form-field>

have mat-autocomplete not replace but add value

1 Answers