migrated to new control flow syntax

src/app/journal/journal-character/general/general.component.html

@@ -1,13 +1,16 @@
 <div class="general-container">
   <div class="first-row">
     <div class="image-container">
-      <img
-        class="image-icon"
-        *ngIf="!image"
-        src="assets/icons/UIIcons/image.svg"
-        alt="Bild"
-      />
-      <img class="portrait" *ngIf="image" [src]="image" alt="portrait" />
+      @if (!image) {
+        <img
+          class="image-icon"
+          src="assets/icons/UIIcons/image.svg"
+          alt="Bild"
+        />
+      }
+      @if (image) {
+        <img class="portrait" [src]="image" alt="portrait" />
+      }
       <img
         class="upload-icon"
         src="assets/icons/UIIcons/upload.svg"

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

@@ -20,44 +20,46 @@
 
         <p [innerHTML]="ability.shortDescription"></p>
 
-        <div class="charges-box" *ngIf="ability.charges != 0">
-          {{ "abilities.uses" | translate }}
-          @if (ability.charges > 9) {
-            <div class="usage-box">
-              <icon-button
-                [icon]="'remove'"
-                [disabled]="ability.currentlyUsedCharges === ability.charges"
-                (click)="addUsage(index); $event.stopPropagation()"
-              ></icon-button>
-              <div class="usage">
-                {{ ability.charges - ability.currentlyUsedCharges }}/{{
-                  ability.charges
-                }}
+        @if (ability.charges != 0) {
+          <div class="charges-box">
+            {{ "abilities.uses" | translate }}
+            @if (ability.charges > 9) {
+              <div class="usage-box">
+                <icon-button
+                  [icon]="'remove'"
+                  [disabled]="ability.currentlyUsedCharges === ability.charges"
+                  (click)="addUsage(index); $event.stopPropagation()"
+                ></icon-button>
+                <div class="usage">
+                  {{ ability.charges - ability.currentlyUsedCharges }}/{{
+                    ability.charges
+                  }}
+                </div>
+                <icon-button
+                  [icon]="'add'"
+                  [disabled]="ability.currentlyUsedCharges === 0"
+                  (click)="removeUsage(index); $event.stopPropagation()"
+                ></icon-button>
               </div>
-              <icon-button
-                [icon]="'add'"
-                [disabled]="ability.currentlyUsedCharges === 0"
-                (click)="removeUsage(index); $event.stopPropagation()"
-              ></icon-button>
-            </div>
-          } @else {
-            @for (
-              _ of getArray(ability.charges);
-              let chargeIndex = $index;
-              track _
-            ) {
-              <input
-                [id]="'checkbox' + index + '-' + chargeIndex"
-                type="checkbox"
-                (click)="$event.stopPropagation()"
-                (change)="
-                  $event.stopPropagation();
-                  handleChangedCharges(index, $event.target)
-                "
-              />
+            } @else {
+              @for (
+                _ of getArray(ability.charges);
+                let chargeIndex = $index;
+                track _
+              ) {
+                <input
+                  [id]="'checkbox' + index + '-' + chargeIndex"
+                  type="checkbox"
+                  (click)="$event.stopPropagation()"
+                  (change)="
+                    $event.stopPropagation();
+                    handleChangedCharges(index, $event.target)
+                  "
+                />
+              }
             }
-          }
-        </div>
+          </div>
+        }
       </div>
     } @empty {
       <div class="empty-list">{{ "abilities.empty" | translate }}</div>

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

@@ -64,13 +64,14 @@
           class="item-list"
           (cdkDropListDropped)="dropLanguages($event)"
         >
-          <div
-            class="item"
-            *ngFor="let language of proficiencies.get('languages')!.value"
-            cdkDrag
-          >
-            {{ language }}
-          </div>
+          @for (
+            language of proficiencies.get("languages")!.value;
+            track language
+          ) {
+            <div class="item" cdkDrag>
+              {{ language }}
+            </div>
+          }
         </div>
         <h5 class="left">{{ "proficiencies.tools" | translate }}</h5>
         <div
@@ -78,13 +79,11 @@
           class="item-list"
           (cdkDropListDropped)="dropTools($event)"
         >
-          <div
-            class="item"
-            *ngFor="let tool of proficiencies.get('tools')!.value"
-            cdkDrag
-          >
-            {{ tool }}
-          </div>
+          @for (tool of proficiencies.get("tools")!.value; track tool) {
+            <div class="item" cdkDrag>
+              {{ tool }}
+            </div>
+          }
         </div>
       </mat-expansion-panel>
     </mat-accordion>

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.html

@@ -19,9 +19,11 @@
               [(ngModel)]="spellslots[levelIndex].totalSlots"
               style="padding-left: 0.5rem"
             >
-              <option *ngFor="let number of [1, 2, 3, 4]" [value]="number">
-                {{ number }}
-              </option>
+              @for (number of [1, 2, 3, 4]; track number) {
+                <option [value]="number">
+                  {{ number }}
+                </option>
+              }
             </select>
             <icon-button
               style="display: inline; margin-left: 0.25rem"
@@ -44,18 +46,20 @@
     >
       {{ "magic.showKi" | translate }}
     </mat-slide-toggle>
-    <div class="t-1" *ngIf="kiPoints.showKiPoints">
-      {{ "magic.availableKi" | translate }}
-      <div class="t-05">
-        <mat-form-field appearance="outline">
-          <mat-select [(ngModel)]="kiPoints.totalPoints">
-            @for (number of kiNumbersArray; track number) {
-              <mat-option [value]="number">{{ number }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
+    @if (kiPoints.showKiPoints) {
+      <div class="t-1">
+        {{ "magic.availableKi" | translate }}
+        <div class="t-05">
+          <mat-form-field appearance="outline">
+            <mat-select [(ngModel)]="kiPoints.totalPoints">
+              @for (number of kiNumbersArray; track number) {
+                <mat-option [value]="number">{{ number }}</mat-option>
+              }
+            </mat-select>
+          </mat-form-field>
+        </div>
       </div>
-    </div>
+    }
   }
 
   <div class="horizontal-buttons">

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.html

@@ -1,28 +1,29 @@
 <div class="slots-box">
   <div class="slots-container">
-    <div *ngIf="kiPoints.showKiPoints" class="ki-container">
-      <div
-        class="level-row"
-        [ngClass]="{ used: kiPoints.usedPoints == kiPoints.totalPoints }"
-      >
-        {{ "magic.ki" | translate }}
-        <div class="checkboxes">
-          <ng-container
-            *ngFor="
-              let _ of getArray(kiPoints.totalPoints);
-              let kiIndex = index
-            "
-          >
-            <input
-              [id]="'checkbox' + kiIndex"
-              type="checkbox"
-              (change)="handleUsedKiPoints(kiIndex, $event.target)"
-            />
-          </ng-container>
+    @if (kiPoints.showKiPoints) {
+      <div class="ki-container">
+        <div
+          class="level-row"
+          [ngClass]="{ used: kiPoints.usedPoints == kiPoints.totalPoints }"
+        >
+          {{ "magic.ki" | translate }}
+          <div class="checkboxes">
+            @for (
+              _ of getArray(kiPoints.totalPoints);
+              track _;
+              let kiIndex = $index
+            ) {
+              <input
+                [id]="'checkbox' + kiIndex"
+                type="checkbox"
+                (change)="handleUsedKiPoints(kiIndex, $event.target)"
+              />
+            }
+          </div>
         </div>
+        <div class="ki-add-buttons"></div>
       </div>
-      <div class="ki-add-buttons"></div>
-    </div>
+    }
 
     @if (showSpellslots) {
       <div class="spell-container">

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.html

@@ -95,9 +95,15 @@
 <!-- COST -->
 <ng-template #costTemplate let-spell="spell">
   <div class="bold">
-    <span *ngIf="spell.cost === 'action'">A</span>
-    <span *ngIf="spell.cost === 'bonus'">B</span>
-    <span *ngIf="spell.cost === 'reaction'">R</span>
+    @if (spell.cost === "action") {
+      <span>A</span>
+    }
+    @if (spell.cost === "bonus") {
+      <span>B</span>
+    }
+    @if (spell.cost === "reaction") {
+      <span>R</span>
+    }
   </div>
 </ng-template>
 
@@ -112,18 +118,18 @@
       }
     </div>
     <div class="bold small">
-      <span *ngIf="spell.needsConcentration"
-        >{{ "spells.concentrationAbbr" | translate }} |
-      </span>
-      <span *ngIf="spell.needsVerbal"
-        >{{ "spells.components.verbal" | translate }}
-      </span>
-      <span *ngIf="spell.needsSomatic"
-        >{{ "spells.components.somatic" | translate }}
-      </span>
-      <span *ngIf="spell.needsMaterial"
-        >{{ "spells.components.material" | translate }}
-      </span>
+      @if (spell.needsConcentration) {
+        <span>{{ "spells.concentrationAbbr" | translate }} | </span>
+      }
+      @if (spell.needsVerbal) {
+        <span>{{ "spells.components.verbal" | translate }} </span>
+      }
+      @if (spell.needsSomatic) {
+        <span>{{ "spells.components.somatic" | translate }} </span>
+      }
+      @if (spell.needsMaterial) {
+        <span>{{ "spells.components.material" | translate }} </span>
+      }
       <div></div>
     </div>
   </div>
@@ -131,27 +137,37 @@
 
 <!-- Level -->
 <ng-template #spellLevelTemplate let-spell="spell">
-  <div *ngIf="spell.level !== 0" class="bold">{{ spell.level }}</div>
-  <div *ngIf="spell.level === 0" class="bold">
-    {{ "spells.cantrip" | translate }}
-  </div>
+  @if (spell.level !== 0) {
+    <div class="bold">{{ spell.level }}</div>
+  }
+  @if (spell.level === 0) {
+    <div class="bold">
+      {{ "spells.cantrip" | translate }}
+    </div>
+  }
 </ng-template>
 
 <!-- Attack -->
 <ng-template #spellAttackTemplate let-spell="spell">
   <div>
-    <div *ngIf="spell.needsSavingThrow">
+    @if (spell.needsSavingThrow) {
       <div>
-        {{
-          "attributesAbbreviations." + spell.savingThrowAttribute | translate
-        }}
+        <div>
+          {{
+            "attributesAbbreviations." + spell.savingThrowAttribute | translate
+          }}
+        </div>
+        <div>{{ spellSaveDC }}</div>
       </div>
-      <div>{{ spellSaveDC }}</div>
-    </div>
-    <div *ngIf="spell.needsAttackRoll">
-      <div>{{ spellAttackBonus }}</div>
-    </div>
-    <div *ngIf="!spell.needsSavingThrow && !spell.needsAttackRoll">-</div>
+    }
+    @if (spell.needsAttackRoll) {
+      <div>
+        <div>{{ spellAttackBonus }}</div>
+      </div>
+    }
+    @if (!spell.needsSavingThrow && !spell.needsAttackRoll) {
+      <div>-</div>
+    }
   </div>
 </ng-template>
 
@@ -159,19 +175,21 @@
 <ng-template #spellDamageTemplate let-spell="spell">
   <div>
     @if (spell.doesDamage) {
-      <div *ngFor="let damage of spell.damage; let index = index">
-        <span>
-          {{ damage.diceNumber }}
-          {{ "general.dice" | translate }}{{ damage.diceType }}
-        </span>
-        <span>
-          <icon
-            [size]="'m'"
-            [type]="'damage'"
-            [icon]="damage.damageType"
-          ></icon>
-        </span>
-      </div>
+      @for (damage of spell.damage; track damage; let index = $index) {
+        <div>
+          <span>
+            {{ damage.diceNumber }}
+            {{ "general.dice" | translate }}{{ damage.diceType }}
+          </span>
+          <span>
+            <icon
+              [size]="'m'"
+              [type]="'damage'"
+              [icon]="damage.damageType"
+            ></icon>
+          </span>
+        </div>
+      }
     }
     @if (spell.doesHeal) {
       <div class="heal">
@@ -179,9 +197,9 @@
           >{{ spell.heal.diceNumber }} {{ "general.dice" | translate
           }}{{ spell.heal.diceType }}
         </span>
-        <span *ngIf="spell.heal.additionalHeal"
-          >+{{ spell.heal.additionalHeal }}
-        </span>
+        @if (spell.heal.additionalHeal) {
+          <span>+{{ spell.heal.additionalHeal }} </span>
+        }
         <span>
           <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
         </span>
@@ -193,16 +211,22 @@
 <!-- Range -->
 <ng-template #spellRangeTemplate let-spell="spell">
   <div class="spell-range">
-    <div *ngIf="spell.isRanged">{{ spell.range }} ft.</div>
-    <div *ngIf="!spell.isRanged && spell.range !== 0">
-      {{ "spells.touch" | translate }}
-    </div>
+    @if (spell.isRanged) {
+      <div>{{ spell.range }} ft.</div>
+    }
+    @if (!spell.isRanged && spell.range !== 0) {
+      <div>
+        {{ "spells.touch" | translate }}
+      </div>
+    }
 
-    <div *ngIf="spell.hasAreaOfEffect">
-      <span
-        >{{ spell.diameter }} ft.
-        {{ "areaTypes." + spell.areaOfEffectType | translate }}</span
-      >
-    </div>
+    @if (spell.hasAreaOfEffect) {
+      <div>
+        <span
+          >{{ spell.diameter }} ft.
+          {{ "areaTypes." + spell.areaOfEffectType | translate }}</span
+        >
+      </div>
+    }
   </div>
 </ng-template>

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.html

@@ -84,9 +84,15 @@
   <!-- COST -->
   <ng-template #costTemplate let-spell="spell">
     <div class="bold">
-      <span *ngIf="spell.cost === 'action'">A</span>
-      <span *ngIf="spell.cost === 'bonus'">B</span>
-      <span *ngIf="spell.cost === 'reaction'">R</span>
+      @if (spell.cost === "action") {
+        <span>A</span>
+      }
+      @if (spell.cost === "bonus") {
+        <span>B</span>
+      }
+      @if (spell.cost === "reaction") {
+        <span>R</span>
+      }
     </div>
   </ng-template>
 
@@ -101,18 +107,18 @@
         }
       </div>
       <div class="bold small">
-        <span *ngIf="spell.needsConcentration"
-          >{{ "spells.concentrationAbbr" | translate }} |
-        </span>
-        <span *ngIf="spell.needsVerbal"
-          >{{ "spells.components.verbal" | translate }}
-        </span>
-        <span *ngIf="spell.needsSomatic"
-          >{{ "spells.components.somatic" | translate }}
-        </span>
-        <span *ngIf="spell.needsMaterial"
-          >{{ "spells.components.material" | translate }}
-        </span>
+        @if (spell.needsConcentration) {
+          <span>{{ "spells.concentrationAbbr" | translate }} | </span>
+        }
+        @if (spell.needsVerbal) {
+          <span>{{ "spells.components.verbal" | translate }} </span>
+        }
+        @if (spell.needsSomatic) {
+          <span>{{ "spells.components.somatic" | translate }} </span>
+        }
+        @if (spell.needsMaterial) {
+          <span>{{ "spells.components.material" | translate }} </span>
+        }
         <div></div>
       </div>
     </div>
@@ -120,27 +126,38 @@
 
   <!-- Level -->
   <ng-template #spellLevelTemplate let-spell="spell">
-    <div *ngIf="spell.level !== 0" class="bold">{{ spell.level }}</div>
-    <div *ngIf="spell.level === 0" class="bold">
-      {{ "spells.cantrip" | translate }}
-    </div>
+    @if (spell.level !== 0) {
+      <div class="bold">{{ spell.level }}</div>
+    }
+    @if (spell.level === 0) {
+      <div class="bold">
+        {{ "spells.cantrip" | translate }}
+      </div>
+    }
   </ng-template>
 
   <!-- Attack -->
   <ng-template #spellAttackTemplate let-spell="spell">
     <div>
-      <div *ngIf="spell.needsSavingThrow">
+      @if (spell.needsSavingThrow) {
         <div>
-          {{
-            "attributesAbbreviations." + spell.savingThrowAttribute | translate
-          }}
+          <div>
+            {{
+              "attributesAbbreviations." + spell.savingThrowAttribute
+                | translate
+            }}
+          </div>
+          <div>{{ spellSaveDC }}</div>
         </div>
-        <div>{{ spellSaveDC }}</div>
-      </div>
-      <div *ngIf="spell.needsAttackRoll">
-        <div>{{ spellAttackBonus }}</div>
-      </div>
-      <div *ngIf="!spell.needsSavingThrow && !spell.needsAttackRoll">-</div>
+      }
+      @if (spell.needsAttackRoll) {
+        <div>
+          <div>{{ spellAttackBonus }}</div>
+        </div>
+      }
+      @if (!spell.needsSavingThrow && !spell.needsAttackRoll) {
+        <div>-</div>
+      }
     </div>
   </ng-template>
 
@@ -148,19 +165,21 @@
   <ng-template #spellDamageTemplate let-spell="spell">
     <div>
       @if (spell.doesDamage) {
-        <div *ngFor="let damage of spell.damage; let index = index">
-          <span>
-            {{ damage.diceNumber }}
-            {{ "general.dice" | translate }}{{ damage.diceType }}
-          </span>
-          <span>
-            <icon
-              [size]="'m'"
-              [type]="'damage'"
-              [icon]="damage.damageType"
-            ></icon>
-          </span>
-        </div>
+        @for (damage of spell.damage; track damage; let index = $index) {
+          <div>
+            <span>
+              {{ damage.diceNumber }}
+              {{ "general.dice" | translate }}{{ damage.diceType }}
+            </span>
+            <span>
+              <icon
+                [size]="'m'"
+                [type]="'damage'"
+                [icon]="damage.damageType"
+              ></icon>
+            </span>
+          </div>
+        }
       }
       @if (spell.doesHeal) {
         <div class="heal">
@@ -168,9 +187,9 @@
             >{{ spell.heal.diceNumber }} {{ "general.dice" | translate
             }}{{ spell.heal.diceType }}
           </span>
-          <span *ngIf="spell.heal.additionalHeal"
-            >+{{ spell.heal.additionalHeal }}
-          </span>
+          @if (spell.heal.additionalHeal) {
+            <span>+{{ spell.heal.additionalHeal }} </span>
+          }
           <span>
             <icon [size]="'xs'" [type]="'damage'" [icon]="'heal'"></icon>
           </span>
@@ -182,17 +201,23 @@
   <!-- Range -->
   <ng-template #spellRangeTemplate let-spell="spell">
     <div class="spell-range">
-      <div *ngIf="spell.isRanged">{{ spell.range }} ft.</div>
-      <div *ngIf="!spell.isRanged && spell.range !== 0">
-        {{ "spells.touch" | translate }}
-      </div>
+      @if (spell.isRanged) {
+        <div>{{ spell.range }} ft.</div>
+      }
+      @if (!spell.isRanged && spell.range !== 0) {
+        <div>
+          {{ "spells.touch" | translate }}
+        </div>
+      }
 
-      <div *ngIf="spell.hasAreaOfEffect">
-        <span
-          >{{ spell.diameter }} ft.
-          {{ "areaTypes." + spell.areaOfEffectType | translate }}</span
-        >
-      </div>
+      @if (spell.hasAreaOfEffect) {
+        <div>
+          <span
+            >{{ spell.diameter }} ft.
+            {{ "areaTypes." + spell.areaOfEffectType | translate }}</span
+          >
+        </div>
+      }
     </div>
   </ng-template>
 </div>

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.html

@@ -14,65 +14,85 @@
     @for (damage of weapon?.damage; let index = $index; track damage) {
       {{ damage.diceNumber }} {{ "general.dice" | translate
       }}{{ damage.diceType }}  
-      <span *ngIf="index === 0 && damageModifier !== '0'">
-        {{ damageModifier }} &nbsp;
-      </span>
+      @if (index === 0 && damageModifier !== "0") {
+        <span> {{ damageModifier }} &nbsp; </span>
+      }
       {{ ("damageTypes." | translate) + damage.damageType | translate }}
     }
   </div>
 }
 
 <!-- Versatility Damage -->
-<div *ngIf="weapon?.isVersatile" class="label">
-  {{ "weapons.single" | translate }}:
-  <div *ngFor="let damage of weapon?.damage">
-    {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
-  </div>
+@if (weapon?.isVersatile) {
+  <div class="label">
+    {{ "weapons.single" | translate }}:
+    @for (damage of weapon?.damage; track damage) {
+      <div>
+        {{ damage.diceNumber }} {{ damage.diceType }} {{ damage.damageType }}
+      </div>
+    }
 
-  {{ "weapons.dual" | translate }}:
-  <div *ngFor="let damage of weapon?.damage; let index = index">
-    {{ damage.diceNumber }}
-    <span *ngIf="index === 0">{{ weapon?.versatileDamage }}</span>
-    <span *ngIf="index !== 0">{{ damage.diceType }}</span>
-    {{ damage.damageType }}
+    {{ "weapons.dual" | translate }}:
+    @for (damage of weapon?.damage; track damage; let index = $index) {
+      <div>
+        {{ damage.diceNumber }}
+        @if (index === 0) {
+          <span>{{ weapon?.versatileDamage }}</span>
+        }
+        @if (index !== 0) {
+          <span>{{ damage.diceType }}</span>
+        }
+        {{ damage.damageType }}
+      </div>
+    }
   </div>
-</div>
+}
 
 <!-- Magical -->
 
 <div class="subheading left">{{ "general.property" | translate }}</div>
 <div class="weapon-properties">
-  <span *ngIf="weapon?.proficient"
-    >{{ "weapons.proficient" | translate }}
-  </span>
-  <span *ngIf="weapon?.isRanged">{{ "weapons.ranged" | translate }} </span>
-  <span *ngIf="weapon?.isVersatile"
-    >{{ "weapons.versatile" | translate }}
-  </span>
-  <span *ngIf="weapon?.isTwoHanded"
-    >{{ "weapons.twoHanded" | translate }}
-  </span>
-  <span *ngIf="weapon?.isFinesse">{{ "weapons.finesse" | translate }} </span>
-  <span *ngIf="weapon?.canBeThrown"
-    >{{ "weapons.throwable" | translate }}
-  </span>
-  <span *ngIf="weapon?.isMagical">{{ "weapons.magical" | translate }} </span>
+  @if (weapon?.proficient) {
+    <span>{{ "weapons.proficient" | translate }} </span>
+  }
+  @if (weapon?.isRanged) {
+    <span>{{ "weapons.ranged" | translate }} </span>
+  }
+  @if (weapon?.isVersatile) {
+    <span>{{ "weapons.versatile" | translate }} </span>
+  }
+  @if (weapon?.isTwoHanded) {
+    <span>{{ "weapons.twoHanded" | translate }} </span>
+  }
+  @if (weapon?.isFinesse) {
+    <span>{{ "weapons.finesse" | translate }} </span>
+  }
+  @if (weapon?.canBeThrown) {
+    <span>{{ "weapons.throwable" | translate }} </span>
+  }
+  @if (weapon?.isMagical) {
+    <span>{{ "weapons.magical" | translate }} </span>
+  }
 </div>
 
 @if (weapon?.isRanged || weapon?.canBeThrown) {
   <div class="subheading left">{{ "weapons.range" | translate }}</div>
 
   <!-- Ranged -->
-  <div *ngIf="weapon?.isRanged">
-    {{ "weapons.range" | translate }}:
-    {{ weapon?.range }}
-  </div>
+  @if (weapon?.isRanged) {
+    <div>
+      {{ "weapons.range" | translate }}:
+      {{ weapon?.range }}
+    </div>
+  }
 
   <!-- Thrown -->
-  <div *ngIf="weapon?.canBeThrown">
-    {{ "weapons.throwRange" | translate }}:
-    {{ weapon?.throwRange }}
-  </div>
+  @if (weapon?.canBeThrown) {
+    <div>
+      {{ "weapons.throwRange" | translate }}:
+      {{ weapon?.throwRange }}
+    </div>
+  }
 }
 
 <!-- Description -->

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component.html

@@ -104,20 +104,22 @@
                 </mat-form-field>
               </div>
 
-              <div *ngIf="isMagical">
-                <div class="input-label">
-                  {{ "weapons.modal.magicalModifier" | translate }}
+              @if (isMagical) {
+                <div>
+                  <div class="input-label">
+                    {{ "weapons.modal.magicalModifier" | translate }}
+                  </div>
+                  <mat-form-field appearance="outline">
+                    <mat-select [(ngModel)]="magicBonus">
+                      @for (magicBonus of [1, 2, 3, 4, 5]; track magicBonus) {
+                        <mat-option [value]="magicBonus">
+                          +{{ magicBonus }}
+                        </mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
                 </div>
-                <mat-form-field appearance="outline">
-                  <mat-select [(ngModel)]="magicBonus">
-                    @for (magicBonus of [1, 2, 3, 4, 5]; track magicBonus) {
-                      <mat-option [value]="magicBonus">
-                        +{{ magicBonus }}
-                      </mat-option>
-                    }
-                  </mat-select>
-                </mat-form-field>
-              </div>
+              }
             </div>
 
             <div class="flex-row t-05">

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.html

@@ -89,24 +89,32 @@
 <!-- Damage -->
 <ng-template #weaponDamageTemplate let-weapon="weapon" let-index="index">
   <div class="damage-list">
-    <div
-      class="damage-row"
-      *ngFor="let damage of weapon.damage; let damageIndex = index"
-    >
-      <span
-        >{{ damage.diceNumber }} {{ "general.dice" | translate
-        }}{{ damage.diceType }}</span
-      >
-      <span *ngIf="weapon.isVersatile && damageIndex === 0"
-        >({{ "general.dice" | translate }}{{ weapon.versatileDamage }})</span
-      >
-      <span *ngIf="damageIndex === 0 && damageModifiers[index] !== '0'">
-        {{ damageModifiers[index] }}
-      </span>
-      <span>
-        <icon [size]="'xs'" [type]="'damage'" [icon]="damage.damageType"></icon>
-      </span>
-    </div>
+    @for (damage of weapon.damage; track damage; let damageIndex = $index) {
+      <div class="damage-row">
+        <span
+          >{{ damage.diceNumber }} {{ "general.dice" | translate
+          }}{{ damage.diceType }}</span
+        >
+        @if (weapon.isVersatile && damageIndex === 0) {
+          <span
+            >({{ "general.dice" | translate
+            }}{{ weapon.versatileDamage }})</span
+          >
+        }
+        @if (damageIndex === 0 && damageModifiers[index] !== "0") {
+          <span>
+            {{ damageModifiers[index] }}
+          </span>
+        }
+        <span>
+          <icon
+            [size]="'xs'"
+            [type]="'damage'"
+            [icon]="damage.damageType"
+          ></icon>
+        </span>
+      </div>
+    }
   </div>
 </ng-template>