angular-comment-mentions/src/app/app.component.html

<mat-toolbar style="background-color: red;">
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
    <mat-icon>menu</mat-icon>
  </button>
  <span>My App</span>
  <span class="example-spacer"></span>
  <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    <mat-icon>share</mat-icon>
  </button>
</mat-toolbar>

<app-progress-stepper
  [steps]="['Bla', 'Noch ein Test', 'Abgeschlossen', '2', '4', '5', '2', '4', '5']"></app-progress-stepper>

<div>
  Textbox:
  <div>
    <mat-form-field>
      <mat-label>Textarea</mat-label>
      <textarea matInput></textarea>
    </mat-form-field>
  </div>


  Enter your comments here:

  <app-comment-box></app-comment-box>

  <mat-form-field class="box">
    <mat-label>Textarea</mat-label>
    <app-comment-box [formControl]="form" [mentionListItems]="selectionList"></app-comment-box>
  </mat-form-field>
</div>

<div>Comment Value: {{parseComment(form)}}</div>

<mat-form-field appearance="outline">
  <mat-label>Choose an option</mat-label>
  <mat-select multiple [formControl]="selectedItemsList">
    <app-select-filter [array]="allOptions" (filteredReturn)="filteredOptions=$event" (selectAll)="selectAll()"
      (unselectAll)="unselectAll()"></app-select-filter>
    @for (item of filteredOptions; track $index) {
    <mat-option [value]="item">{{item}}</mat-option>
    }
  </mat-select>
</mat-form-field>

<router-outlet />