substituted @ifs and @fors with deprecated ngIf and ngFor

src/app/components/navbar/navbar.component.html

@@ -1,9 +1,9 @@
 <header class="header">
   <h1><a class="logo-link" routerLink="/">Kanban Board</a></h1>
   <div class="user-info">
-    @if (authService.currentUser()) {
+    <ng-container *ngIf="authService.currentUser()">
       <span class="username">{{ authService.currentUser()?.email }}</span>
       <button class="btn-logout" (click)="logout()">Logout</button>
-    }
+    </ng-container>
   </div>
 </header>

src/app/components/project-item/project-item.component.html

@@ -3,14 +3,12 @@
     <h3 class="project-title">{{ project.name }}</h3>
   </div>
 
-  @if (project.description) {
+  <p class="project-description" *ngIf="project.description">
-    <p class="project-description">{{ project.description }}</p>
+    {{ project.description }}
-  }
+  </p>
 
-  @if (completionPercentage != null) {
+  <div class="completion-row" *ngIf="completionPercentage != null">
-    <div class="completion-row">
     <span class="completion-label">Completion</span>
     <span class="completion-value">{{ completionPercentage }}%</span>
   </div>
-  }
 </div>

src/app/components/task-item/task-item.component.html

@@ -11,9 +11,9 @@
       [(ngModel)]="statusValue"
       (ngModelChange)="onStatusChange($event)"
     >
-      @for (status of statusOptions; track status) {
+      <option *ngFor="let status of statusOptions; trackBy: trackByStatus" [value]="status">
-        <option [value]="status">{{ status.replace('_', ' ').toUpperCase() }}</option>
+        {{ status.replace('_', ' ').toUpperCase() }}
-      }
+      </option>
     </select>
     <button class="btn-edit" type="button" aria-label="Edit task" (click)="onEdit()">Edit</button>
     <button class="btn-remove" type="button" aria-label="Remove task" (click)="onRemove()">

src/app/components/task-item/task-item.component.ts

@@ -45,6 +45,10 @@ export class TaskItemComponent {
     'failed',
   ];
 
+  trackByStatus(_index: number, status: Task['status']): Task['status'] {
+    return status;
+  }
+
   onStatusChange(value: Task['status']) {
     const previousStatus = this.statusValue;
     const nextStatus = value;

src/app/pages/collaborator-add/collaborator-add.component.html

@@ -2,9 +2,7 @@
   <div class="card">
     <h1>Add collaborator</h1>
 
-    @if (errorMessage()) {
+    <div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
-      <div class="error">{{ errorMessage() }}</div>
-    }
 
     <form (ngSubmit)="onSubmit()" #collaboratorForm="ngForm">
       <div class="form-group">
@@ -27,11 +25,8 @@
           class="btn-primary"
           [disabled]="isSaving() || !collaboratorForm.form.valid"
         >
-          @if (isSaving()) {
+          <span *ngIf="isSaving(); else addText">Adding...</span>
-            <span>Adding...</span>
+          <ng-template #addText><span>Add collaborator</span></ng-template>
-          } @else {
-            <span>Add collaborator</span>
-          }
         </button>
       </div>
     </form>

src/app/pages/home/home.component.html

@@ -8,11 +8,14 @@
     </div>
 
     <div class="projects-grid">
-      @if (projectList.length > 0) {
+      <ng-container *ngIf="projectList.length > 0; else noProjects">
-        @for (project of projectList; track project.id) {
+        <app-project-item
-          <app-project-item [project]="project" />
+          *ngFor="let project of projectList; trackBy: trackByProjectId"
-        }
+          [project]="project"
-      } @else {
+        />
+      </ng-container>
+
+      <ng-template #noProjects>
         <div class="no-projects">
           <p>
             You have no projects.
@@ -21,7 +24,7 @@
             </a>
           </p>
         </div>
-      }
+      </ng-template>
     </div>
   </main>
 </div>

src/app/pages/home/home.component.ts

@@ -10,7 +10,7 @@ import { Project } from '../../models/projects.models';
   standalone: true,
   imports: [CommonModule, ProjectItemComponent],
   templateUrl: './home.component.html',
-  styleUrl: './home.component.css'
+  styleUrl: './home.component.css',
 })
 export class HomeComponent {
   protected authService = inject(AuthService);
@@ -23,4 +23,8 @@ export class HomeComponent {
   onCreateProject() {
     this.router.navigate(['/projects/new']);
   }
+
+  trackByProjectId(_index: number, project: Project): number {
+    return project.id;
+  }
 }

src/app/pages/login/login.component.html

@@ -3,11 +3,9 @@
     <h1>{{ 'KanbanCloneAngular' }}</h1>
     <h2>Sign In</h2>
 
-    @if (errorMessage()) {
+    <div class="error-message" *ngIf="errorMessage()">
-      <div class="error-message">
       {{ errorMessage() }}
     </div>
-    }
 
     <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
       <div class="form-group">
@@ -37,11 +35,8 @@
       </div>
 
       <button type="submit" class="btn-primary" [disabled]="isLoading() || !loginForm.form.valid">
-        @if (isLoading()) {
+        <span *ngIf="isLoading(); else loginText">Logging in...</span>
-          <span>Logging in...</span>
+        <ng-template #loginText><span>Login</span></ng-template>
-        } @else {
-          <span>Login</span>
-        }
       </button>
     </form>
 

src/app/pages/project-create/project-create.component.html

@@ -2,9 +2,7 @@
   <div class="card">
     <h1>Create project</h1>
 
-    @if (errorMessage()) {
+    <div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
-      <div class="error">{{ errorMessage() }}</div>
-    }
 
     <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
       <div class="form-group">
@@ -38,11 +36,8 @@
           class="btn-primary"
           [disabled]="isSaving() || !projectForm.form.valid"
         >
-          @if (isSaving()) {
+          <span *ngIf="isSaving(); else createText">Creating...</span>
-            <span>Creating...</span>
+          <ng-template #createText><span>Create project</span></ng-template>
-          } @else {
-            <span>Create project</span>
-          }
         </button>
       </div>
     </form>

src/app/pages/project-details/project-details.component.html

@@ -1,14 +1,20 @@
 <div class="details-container">
   <main class="content">
-    @if (isLoading()) {
+    <ng-container *ngIf="isLoading(); else loadedState">
       <div class="loading">
         <p>Loading project...</p>
       </div>
-    } @else if (errorMessage()) {
+    </ng-container>
+
+    <ng-template #loadedState>
+      <ng-container *ngIf="errorMessage(); else contentState">
         <div class="error-state">
           <p>{{ errorMessage() }}</p>
         </div>
-    } @else {
+      </ng-container>
+    </ng-template>
+
+    <ng-template #contentState>
       <section class="project-card">
         <h2>{{ project()?.name }}</h2>
         <h4>Project description:</h4>
@@ -26,21 +32,21 @@
             </span>
           </div>
 
-          @if ((project()?.tasks?.length ?? 0) > 0) {
+          <ng-container *ngIf="(project()?.tasks?.length ?? 0) > 0; else emptyTasks">
             <div class="tasks-list">
-              @for (task of project()?.tasks ?? []; track task.id) {
               <app-task-item
+                *ngFor="let task of project()?.tasks ?? []; trackBy: trackByTaskId"
                 [task]="task"
                 [projectId]="project()?.id"
                 (statusChange)="onTaskStatusChange($event)"
               />
-              }
             </div>
-          } @else {
+          </ng-container>
+          <ng-template #emptyTasks>
             <div class="empty-state">
               <p>No tasks yet.</p>
             </div>
-          }
+          </ng-template>
 
           <button class="btn-add-task" type="button" (click)="onAddTask()">Add task</button>
         </section>
@@ -51,20 +57,23 @@
             <span class="collaborators-count"> {{ project()?.users?.length ?? 0 }} total </span>
           </div>
 
-          @if ((project()?.users?.length ?? 0) > 0) {
+          <ng-container *ngIf="(project()?.users?.length ?? 0) > 0; else emptyCollaborators">
             <div
               class="collaborators-grid"
               [class.collaborators-grid--single]="(project()?.users?.length ?? 0) === 1"
             >
-              @for (user of project()?.users ?? []; track user.id) {
+              <app-collaborator-item
-                <app-collaborator-item [user]="user" (remove)="onRemoveCollaborator($event)" />
+                *ngFor="let user of project()?.users ?? []; trackBy: trackByUserId"
-              }
+                [user]="user"
+                (remove)="onRemoveCollaborator($event)"
+              />
             </div>
-          } @else {
+          </ng-container>
+          <ng-template #emptyCollaborators>
             <div class="empty-state">
               <p>No collaborators yet.</p>
             </div>
-          }
+          </ng-template>
 
           <button class="btn-add-collaborator" type="button" (click)="onAddCollaborator()">
             Add collaborator
@@ -98,6 +107,6 @@
           </div>
         </div>
       </section>
-    }
+    </ng-template>
   </main>
 </div>

src/app/pages/project-details/project-details.component.ts

@@ -186,4 +186,12 @@ export class ProjectDetailsComponent {
 
     this.router.navigate(['/projects', this.projectId, 'edit']);
   }
+
+  trackByTaskId(_index: number, task: Task): number {
+    return task.id;
+  }
+
+  trackByUserId(_index: number, user: User): string | number {
+    return user.id;
+  }
 }

src/app/pages/project-edit/project-edit.component.html

@@ -2,13 +2,13 @@
   <div class="card">
     <h1>Edit project</h1>
 
-    @if (errorMessage()) {
+    <div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
-      <div class="error">{{ errorMessage() }}</div>
-    }
 
-    @if (isLoading()) {
+    <ng-container *ngIf="isLoading(); else formContent">
       <p class="loading">Loading project...</p>
-    } @else {
+    </ng-container>
+
+    <ng-template #formContent>
       <form (ngSubmit)="onSubmit()" #projectForm="ngForm">
         <div class="form-group">
           <label for="name">Project name</label>
@@ -41,14 +41,11 @@
             class="btn-primary"
             [disabled]="isSaving() || !projectForm.form.valid"
           >
-            @if (isSaving()) {
+            <span *ngIf="isSaving(); else saveText">Saving...</span>
-              <span>Saving...</span>
+            <ng-template #saveText><span>Save changes</span></ng-template>
-            } @else {
-              <span>Save changes</span>
-            }
           </button>
         </div>
       </form>
-    }
+    </ng-template>
   </div>
 </div>

src/app/pages/register/register.component.html

@@ -3,11 +3,9 @@
     <h1>{{ 'KanbanCloneAngular' }}</h1>
     <h2>Create account</h2>
 
-    @if (errorMessage()) {
+    <div class="error-message" *ngIf="errorMessage()">
-      <div class="error-message">
       {{ errorMessage() }}
     </div>
-    }
 
     <form (ngSubmit)="onSubmit()" #registerForm="ngForm">
       <div class="form-group">
@@ -54,11 +52,8 @@
         class="btn-primary"
         [disabled]="isLoading() || !registerForm.form.valid"
       >
-        @if (isLoading()) {
+        <span *ngIf="isLoading(); else registerText">Creating...</span>
-          <span>Creating...</span>
+        <ng-template #registerText><span>Create account</span></ng-template>
-        } @else {
-          <span>Create account</span>
-        }
       </button>
     </form>
 

src/app/pages/task-create/task-create.component.html

@@ -2,9 +2,7 @@
   <div class="card">
     <h1>Create task</h1>
 
-    @if (errorMessage()) {
+    <div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
-      <div class="error">{{ errorMessage() }}</div>
-    }
 
     <form (ngSubmit)="onSubmit()" #taskForm="ngForm">
       <div class="form-group">
@@ -44,11 +42,8 @@
       <div class="actions">
         <button type="button" class="btn-secondary" (click)="onCancel()">Cancel</button>
         <button type="submit" class="btn-primary" [disabled]="isSaving() || !taskForm.form.valid">
-          @if (isSaving()) {
+          <span *ngIf="isSaving(); else createText">Creating...</span>
-            <span>Creating...</span>
+          <ng-template #createText><span>Create task</span></ng-template>
-          } @else {
-            <span>Create task</span>
-          }
         </button>
       </div>
     </form>

src/app/pages/task-edit/task-edit.component.html

@@ -2,13 +2,13 @@
   <div class="card">
     <h1>Edit task</h1>
 
-    @if (errorMessage()) {
+    <div class="error" *ngIf="errorMessage()">{{ errorMessage() }}</div>
-      <div class="error">{{ errorMessage() }}</div>
-    }
 
-    @if (isLoading()) {
+    <ng-container *ngIf="isLoading(); else formContent">
       <div class="loading">Loading task...</div>
-    } @else {
+    </ng-container>
+
+    <ng-template #formContent>
       <form (ngSubmit)="onSubmit()" #taskForm="ngForm">
         <div class="form-group">
           <label for="title">Task title</label>
@@ -47,14 +47,11 @@
         <div class="actions">
           <button type="button" class="btn-secondary" (click)="onCancel()">Cancel</button>
           <button type="submit" class="btn-primary" [disabled]="isSaving() || !taskForm.form.valid">
-            @if (isSaving()) {
+            <span *ngIf="isSaving(); else saveText">Saving...</span>
-              <span>Saving...</span>
+            <ng-template #saveText><span>Save changes</span></ng-template>
-            } @else {
-              <span>Save changes</span>
-            }
           </button>
         </div>
       </form>
-    }
+    </ng-template>
   </div>
 </div>