Use new template syntax

Author: XanderVertegaal

frontend/src/app/annotate/annotation-input/knowledge-base-form/knowledge-base-form.component.html

@@ -5,13 +5,9 @@ <h3 class="h5" i18n>Knowledge Base</h3>
     <div class="card-body">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <ul formArrayName="kbItems" class="ps-0 list-unstyled">
-                <li
-                    *ngFor="
-                        let kbItem of form.controls.kbItems.controls;
-                        let i = index
-                    "
-                    class="mb-3"
-                >
+                @for (kbItem of form.controls.kbItems.controls; let i = $index;
+                track $index) {
+                <li class="mb-3">
                     <div [formGroupName]="i" class="input-group">
                         <input
                             type="text"
@@ -27,9 +23,12 @@ <h3 class="h5" i18n>Knowledge Base</h3>
                             <option value="" disabled selected i18n>
                                 Select Relationship
                             </option>
-                            <option *ngFor="let relationship of relationshipTypes" [value]="relationship">
+                            @for (relationship of relationshipTypes; track
+                            $index) {
+                            <option [value]="relationship">
                                 {{ getRelationshipTypeName(relationship) }}
                             </option>
+                            }
                         </select>
                         <input
                             type="text"
@@ -53,6 +52,7 @@ <h3 class="h5" i18n>Knowledge Base</h3>
                         </button>
                     </div>
                 </li>
+                }
             </ul>
             <div class="btn-group" role="group">
                 <button

frontend/src/app/annotate/annotation-input/premises-form/premises-form.component.html

@@ -5,10 +5,10 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
     <div class="card-body">
         <form [formGroup]="form" (ngSubmit)="onSubmit()">
             <ul formArrayName="premises" class="ps-0 list-unstyled">
-                <li
-                    *ngFor="let premise of premises.controls; let i = index"
-                    class="mb-3"
-                >
+                @for (premise of premises.controls; let i = $index; track
+                $index) {
+
+                <li class="mb-3">
                     <label
                         [attr.for]="'premise-' + i"
                         class="form-label fw-bold"
@@ -38,6 +38,7 @@ <h3 class="h5" i18n>Premises and Conclusion</h3>
                         </button>
                     </div>
                 </li>
+                }
             </ul>
             <button
                 type="button"

frontend/src/app/menu/menu.component.html

@@ -34,7 +34,8 @@
                         Home
                     </a>
                 </li>
-                <li *ngIf="loggedIn$ | async" class="nav-item">
+                @if (loggedIn$ | async) {
+                <li class="nav-item">
                     <a
                         [routerLink]="['/annotate']"
                         routerLinkActive="active"
@@ -44,6 +45,7 @@
                         Annotate
                     </a>
                 </li>
+                }
                 <li class="nav-item">
                     <a
                         [routerLink]="['/about']"
@@ -61,46 +63,43 @@
                     <la-dark-mode-toggle role="listitem" class="nav-item" />
                 </li>
                 @if (languages) {
-                    <li class="nav-item" ngbDropdown>
+                <li class="nav-item" ngbDropdown>
+                    <button
+                        class="nav-link"
+                        ngbDropdownToggle
+                        id="language-dropdown-toggle"
+                        aria-label="language"
+                        i18n-aria-label
+                    >
+                        @if (loading) {
+                        <span class="spinner-border spinner-border-sm"></span>
+                        <span class="visually-hidden" i18n
+                            >Loading languages...</span
+                        >
+                        } @else {
+                        <fa-icon [icon]="faGlobe" aria-hidden="true" />
+                        }
+                    </button>
+                    <div
+                        ngbDropdownMenu
+                        aria-labelledby="language-dropdown-toggle"
+                        class="dropdown-menu dropdown-menu-end"
+                    >
+                        @for (language of languages; track $index) {
                         <button
-                            class="nav-link"
-                            ngbDropdownToggle
-                            id="language-dropdown-toggle"
-                            aria-label="language"
-                            i18n-aria-label
+                            ngbDropdownItem
+                            class="navbar-item"
+                            [class.active]="language.code == currentLanguage"
+                            [attr.aria-pressed]="
+                                language.code == currentLanguage
+                            "
+                            (click)="setLanguage(language.code)"
                         >
-                            @if (loading) {
-                                <span
-                                    class="spinner-border spinner-border-sm"
-                                ></span>
-                                <span class="visually-hidden" i18n
-                                    >Loading languages...</span
-                                >
-                            } @else {
-                                <fa-icon [icon]="faGlobe" aria-hidden="true" />
-                            }
+                            {{ language.name }}
                         </button>
-                        <div
-                            ngbDropdownMenu
-                            aria-labelledby="language-dropdown-toggle"
-                            class="dropdown-menu dropdown-menu-end"
-                        >
-                            <button
-                                *ngFor="let language of languages"
-                                ngbDropdownItem
-                                class="navbar-item"
-                                [class.active]="
-                                    language.code == currentLanguage
-                                "
-                                [attr.aria-pressed]="
-                                    language.code == currentLanguage
-                                "
-                                (click)="setLanguage(language.code)"
-                            >
-                                {{ language.name }}
-                            </button>
-                        </div>
-                    </li>
+                        }
+                    </div>
+                </li>
                 }
                 <la-user-menu />
             </ul>