How to add multiple dropdown values and normal text into a texbox

I have a email subject textbox where I can input combination of dynamic dropdown value and other text entered by user, here I can enter only one dynamic value at start, cant add another dynamic value after that please help.

its an email subject for example there are 3 dynamic value here [“creditcard”,”accountno”,”Amount”].
sample output – “Hi jack your creditcard with accoutno has due Amount” here creditcard accoutno and Amount are dynamic value from dropdown and rest are normal text

HTML

 <div class="textbox">
        <label class="textbox__label" [for]="id">{{label}}</label>
        <input class="textbox__input" [type]="type" [id]="id" [placeholder]="placeholder" [value]="value" [name]="name"
            autocomplete="off" (input)="onChange($event)" (keyup.Space)="doSomething()" [(ngModel)]="model" />
        <ul class="textbox__dropdown" *ngIf="show">
            <ng-container *ngFor="let list of listData ; let i = index">
                <li (click)="handleSetValue(list)">
                    <span [style.background-color]="colors[i % colors.length]">{{list.value.charAt(0)}}</span>
                    {{list.value}}
                </li>
            </ng-container>
        </ul>
    </div>

TS

import { Component, VERSION,Output, EventEmitter } from '@angular/core';
import { isEmpty } from 'lodash';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  public dynamicList = ["creditcard","accountno","Amount"]
  public value;
 public listData: any;
  public show: boolean = true;
  public model: any;
    @Output() selectedValue = new EventEmitter();


  onChange(event: any) {
    if (event.target.value !== '' && this.dynamicList) {
      console.log(event.target.value);
      this.show = true;
      const item = this.dynamicList.filter((items) => items.toLowerCase().includes(event.target.value));
      if (!isEmpty(item)) {
        this.listData = item;
        console.log(item)
      } else {
        this.show = false;
        this.selectedValue.emit(event.target.value)
      }
    } else {
      this.listData = this.dynamicList;
      this.show = false
    }
  }

Stackblitz-link

Source: New feed
Source Url How to add multiple dropdown values and normal text into a texbox