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>

<div>
  <mat-form-field>
    <mat-label>Currency Input</mat-label>
    <app-currency-input [formControl]="currencyFormControl"></app-currency-input>
  </mat-form-field>

  <pre>Value: {{currencyFormControl.value}}</pre>

</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>

<!-- 
<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <input matInput [grossNetCalculator]="calculator">
  <gross-net-calculator-toggle-button matIconPrefix></gross-net-calculator-toggle-button>
  <gross-net-calculator #calculator></gross-net-calculator>
</mat-form-field> -->

<div style="margin: 1rem">
  <app-gantt [items]="ganttItems"></app-gantt>
</div>


<!-- component.html -->
<!-- <ngx-gantt #gantt [items]="items">
  <ngx-gantt-table>
    <ngx-gantt-column name="test" width="300px">
      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
    </ngx-gantt-column>
  </ngx-gantt-table>
</ngx-gantt> -->

<router-outlet />