Replace deprecated Angular directives (*ngFor, *ngIf) with modern Angular template syntax. Remove unused CommonModule imports across components for optimization. Clean up excess spacing and formatting in HTML files.

frontend/src/app/pages/altitude/about/about.component.ts

@@ -1,15 +1,14 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '@services/scroll.service';
-import {CommonModule} from '@angular/common';
+
 import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-about',
   standalone: true,
   imports: [
-    CommonModule,
     HeaderComponent
-  ],
+],
   templateUrl: './about.component.html',
   styleUrl: './about.component.scss'
 })

frontend/src/app/pages/altitude/birthdays/birthdays.component.ts

@@ -1,15 +1,14 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '@services/scroll.service';
-import {CommonModule} from '@angular/common';
+
 import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-birthdays',
   standalone: true,
   imports: [
-    CommonModule,
     HeaderComponent
-  ],
+],
   templateUrl: './birthdays.component.html',
   styleUrl: './birthdays.component.scss'
 })

frontend/src/app/pages/altitude/socials/socials.component.ts

@@ -1,16 +1,15 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '@services/scroll.service';
-import {CommonModule, NgOptimizedImage} from '@angular/common';
+import { NgOptimizedImage } from '@angular/common';
 import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-socials',
   standalone: true,
   imports: [
-    CommonModule,
     HeaderComponent,
     NgOptimizedImage
-  ],
+],
   templateUrl: './socials.component.html',
   styleUrl: './socials.component.scss'
 })

frontend/src/app/pages/altitude/team/team.component.html

@@ -1,10 +1,10 @@
 <ng-container>
   <app-header [current_page]="'team'" height="450px" background_image="/public/img/backgrounds/staff.png"
-              [overlay_gradient]="0.5">>
+    [overlay_gradient]="0.5">>
     <div class="title" header-content>
       <h1>Staffing Team</h1>
       <h2>The team that makes Altitude happen. Your owners, admins, moderators, and trainees are all working together to
-        create Altitude, to create home. This is where the magic happens.</h2>
+      create Altitude, to create home. This is where the magic happens.</h2>
     </div>
   </app-header>
 
@@ -12,61 +12,75 @@
     <section class="darkmodeSection">
       <div class="container teamContainer">
         <h2 class="sectionTitle">Management</h2>
-        <div *ngFor="let member of getTeamMembers('owner') | async" class="member">
-          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
-               height="160" width="160" style="width: 160px;">
-          <h2>{{ member.name }}</h2>
-          <p>Owner</p>
-        </div>
-        <div *ngFor="let member of getTeamMembers('manager') | async" class="member">
-          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
-               height="160" width="160" style="width: 160px;">
-          <h2>{{ member.name }}</h2>
-          <p>Manager</p>
-        </div>
-      </div>
-    </section>
-    <section class="darkmodeSectionThree">
-      <div class="container teamContainer">
-        <h2 class="sectionTitle">Admins</h2>
-        <div *ngFor="let member of getTeamMembers('admin') | async" class="member">
-          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
-               height="160" width="160" style="width: 160px;">
-          <h2>{{ member.name }}</h2>
-          <p>Admin</p>
-        </div>
-      </div>
-    </section>
-    <section class="darkmodeSection">
-      <div class="container teamContainer">
-        <h2 class="sectionTitle">Head Moderators</h2>
-        <div *ngFor="let member of getTeamMembers('headmod') | async" class="member">
-          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
-               height="160" width="160" style="width: 160px;">
-          <h2>{{ member.name }}</h2>
-          <p>Head Mod</p>
-        </div>
-      </div>
-    </section>
-    <section class="darkmodeSectionThree">
-      <div class="container teamContainer">
-        <h2 class="sectionTitle">Moderators</h2>
-        <div *ngFor="let member of getTeamMembers('moderator') | async" class="member">
-          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
-               height="160" width="160" style="width: 160px;">
-          <h2>{{ member.name }}</h2>
-        </div>
-      </div>
-    </section>
-    <section *ngIf="(getTeamMembers('trainee') | async)?.length  ?? 0 > 0" class="darkmodeSection">
-      <div class="container teamContainer">
-        <h2 class="sectionTitle">Trainees</h2>
-        <div *ngFor="let member of getTeamMembers('trainee') | async" class="member">
-          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
-               height="160" width="160" style="width: 160px;">
-          <h2>{{ member.name }}</h2>
-        </div>
-      </div>
-    </section>
-  </main>
-</ng-container>
+        @for (member of getTeamMembers('owner') | async; track member) {
+          <div class="member">
+            <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+              height="160" width="160" style="width: 160px;">
+              <h2>{{ member.name }}</h2>
+              <p>Owner</p>
+            </div>
+          }
+          @for (member of getTeamMembers('manager') | async; track member) {
+            <div class="member">
+              <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                height="160" width="160" style="width: 160px;">
+                <h2>{{ member.name }}</h2>
+                <p>Manager</p>
+              </div>
+            }
+          </div>
+        </section>
+        <section class="darkmodeSectionThree">
+          <div class="container teamContainer">
+            <h2 class="sectionTitle">Admins</h2>
+            @for (member of getTeamMembers('admin') | async; track member) {
+              <div class="member">
+                <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                  height="160" width="160" style="width: 160px;">
+                  <h2>{{ member.name }}</h2>
+                  <p>Admin</p>
+                </div>
+              }
+            </div>
+          </section>
+          <section class="darkmodeSection">
+            <div class="container teamContainer">
+              <h2 class="sectionTitle">Head Moderators</h2>
+              @for (member of getTeamMembers('headmod') | async; track member) {
+                <div class="member">
+                  <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                    height="160" width="160" style="width: 160px;">
+                    <h2>{{ member.name }}</h2>
+                    <p>Head Mod</p>
+                  </div>
+                }
+              </div>
+            </section>
+            <section class="darkmodeSectionThree">
+              <div class="container teamContainer">
+                <h2 class="sectionTitle">Moderators</h2>
+                @for (member of getTeamMembers('moderator') | async; track member) {
+                  <div class="member">
+                    <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                      height="160" width="160" style="width: 160px;">
+                      <h2>{{ member.name }}</h2>
+                    </div>
+                  }
+                </div>
+              </section>
+              @if ((getTeamMembers('trainee') | async)?.length  ?? 0 > 0) {
+                <section class="darkmodeSection">
+                  <div class="container teamContainer">
+                    <h2 class="sectionTitle">Trainees</h2>
+                    @for (member of getTeamMembers('trainee') | async; track member) {
+                      <div class="member">
+                        <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+                          height="160" width="160" style="width: 160px;">
+                          <h2>{{ member.name }}</h2>
+                        </div>
+                      }
+                    </div>
+                  </section>
+                }
+              </main>
+            </ng-container>

frontend/src/app/pages/altitude/team/team.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 import {ScrollService} from '@services/scroll.service';
 import {BASE_PATH, Player, TeamService} from '@api';
-import {CommonModule, NgOptimizedImage} from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import {HeaderComponent} from '@header/header.component';
 import {CookieService} from 'ngx-cookie-service';
 import {map, Observable, shareReplay} from 'rxjs';