markables-container.component.html

@for (markable of markables; track markable; let  i = $index) {
  @if (markable.prefix) {
    <span class="prevent-select">{{markable.prefix}}</span>
  }
  @if (markable.word) {
    <aspect-markable-word class="prevent-select"
                          [id]="markable.id"
                          [markingRange]="markingRange"
                          [text]="markable.word"
                          [markColor]="selectedColor.value"
                          [(color)]="markable.color"
                          (colorChange)="onColorChange()">
    </aspect-markable-word>
  }
  @if (markable.suffix) {
    <span class="prevent-select">{{markable.suffix}}</span>
  }
}