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>

Answer 1

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>