DNDTools/src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.html

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div
    class="example-box"
    [class]="ability.currentlyUsedCharges === ability.charges ? 'used' : ''"
    *ngFor="let ability of abilities; let abilityIndex = index"
    (click)="openDetailsPanel(abilityIndex)"
    cdkDrag
  >
    <div *ngIf="ability.cost != 'none'" class="cost-box">
      {{ costTranslator[ability.cost] }}
    </div>
    <div class="ability-name">{{ ability.name }}</div>
    <br />

    <p>{{ ability.shortDescription }}</p>

    <div class="charges-box" *ngIf="ability.charges != 0">
      <span>Aufladungen: </span>
      <span
        *ngFor="let _ of getArray(ability.charges); let chargeIndex = index"
      >
        <input
          [id]="'checkbox' + abilityIndex + '-' + chargeIndex"
          type="checkbox"
          (click)="$event.stopPropagation()"
          (change)="
            $event.stopPropagation();
            handleChangedCharges(abilityIndex, $event.target)
          "
        />
      </span>
    </div>
  </div>

  <button (click)="openAbilityModal()">+</button>
</div>

<ability-modal
  (abilityCreated)="addNewlyCreatedAbility($event)"
  (abilityUpdated)="updateAbility($event)"
  [isToUpdate]="isToUpdate"
  [abilityToUpdate]="abilityToUpdate"
></ability-modal>