DNDTools/src/app/character/character-picker/character-card/character-card.component.html

<div class="character-card" (click)="selectCharacter()">
  <div
    class="delete-area"
    (click)="deleteCharacter(); $event.stopPropagation()"
  >
    <img
      style="width: 50%"
      src="assets/icons/UIIcons/delete.svg"
      alt="Delete Button"
    />
  </div>
  <!-- The characterData is not loaded initially, so this is a workaround. Maybe add a resolver first -->
  @if(image){
  <img [src]="image" alt="portrait" />
  } @else {
  <img
    [src]="'assets/images/' + characterData.gender + '.jpg'"
    alt="character"
  />
  }
  <div class="content">
    <div class="name">{{ character }}</div>
    <div class="level">Stufe {{ characterData.level }}</div>
    <div class="species">{{ races[characterData.race].display }}</div>
    <div class="class">{{ classes[characterData.class].display }}</div>
    <!-- <div class="subclass">{{ characterData.class }}</div> -->
  </div>
</div>