Text and Chips together in one input of Angular Material

Question

I want to have chips and text in one input. From what I could find there's always only chips. I have Angular v11 and Angular Material v11 in the project and the best way would be to use Angular Chips

Have you guys any kind of experience, samples, packages or advices how can I achieve this?

I tried to put texts between <mat-chip> components and it looks like what I want(image in the top), but you can't edit it and you can't treat it as a text because it's not inside the <input> element.

<mat-form-field class="example-chip-list">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip>
      {{'Mike'}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <span> went on hike with </span>
    <mat-chip>
      {{'Jane'}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <span> and they met </span>
    <mat-chip>
      {{'Katie'}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <span> in the middle. </span>
    <input
      #fruitInput
      [formControl]="fruitCtrl"
      [matChipInputFor]="chipList"
      (matChipInputTokenEnd)="add($event)"
    />
  </mat-chip-list>
</mat-form-field>

Here's the Stackblitz