chore: refactor *ngIf to use @if syntax

Standalone/src/app/components/nav-bar/nav-bar.component.html

@@ -24,26 +24,28 @@
           <li class="nav-item">
             <a routerLink="/" class="nav-link">Home</a>
           </li>
-          <li class="nav-item" *ngIf="auth.isAuthenticated$ | async">
-            <a routerLink="external-api" class="nav-link">External API</a>
-          </li>
-          <li class="nav-item" *ngIf="auth.isAuthenticated$ | async">
-            <button
-              class="btn btn-link p-0"
-              style="min-width: unset"
-              id="qsLogoutBtn"
-              (click)="logout()"
-            >
-              Log out
-            </button>
-          </li>
+          @if (auth.isAuthenticated$ | async) {
+            <li class="nav-item">
+              <a routerLink="external-api" class="nav-link">External API</a>
+            </li>
+            <li class="nav-item">
+              <button
+                class="btn btn-link p-0"
+                style="min-width: unset"
+                id="qsLogoutBtn"
+                (click)="logout()"
+              >
+                Log out
+              </button>
+            </li>
+          }
         </ul>
 
         <ul class="navbar-nav d-none d-md-block">
           <!-- Login button: show if NOT authenticated -->
+          @if ((auth.isAuthenticated$ | async) === false) {
           <li
             class="nav-item"
-            *ngIf="(auth.isAuthenticated$ | async) === false"
           >
             <button
               id="qsLoginBtn"
@@ -53,13 +55,13 @@
               Log in
             </button>
           </li>
+        }
           <!-- / Login button -->
 
-
           <!-- Fullsize dropdown: show if authenticated -->
+          @if (auth.user$ | async; as user) {
           <li
             class="nav-item dropdown"
-            *ngIf="auth.user$ | async as user"
             ngbDropdown
           >
             <a
@@ -92,13 +94,14 @@
               </button>
             </div>
           </li>
+          }
           <!-- /Fullsize dropdown -->
         </ul>
 
         <!-- Responsive login button: show if NOT authenticated -->
+        @if ((auth.isAuthenticated$ | async) === false) {
         <ul
           class="navbar-nav d-md-none"
-          *ngIf="(auth.isAuthenticated$ | async) === false"
         >
           <button
             class="btn btn-primary btn-block"
@@ -109,12 +112,13 @@
           </button>
 
         </ul>
+        }
         <!-- /Responsive login button -->
 
         <!-- Responsive profile dropdown: show if authenticated -->
+        @if (auth.user$ | async; as user) {
         <ul
           class="navbar-nav d-md-none justify-content-between"
-          *ngIf="auth.user$ | async as user"
           style="min-height: 170px;"
         >
           <li class="nav-item">
@@ -145,6 +149,7 @@ <h6 class="d-inline-block">{{ user.name }}</h6>
             </button>
           </li>
         </ul>
+        }
       </div>
     </div>
   </nav>

Standalone/src/app/pages/error/error.component.html

@@ -1,9 +1,9 @@
 <div class="container mt-5">
-<ng-container *ngIf="error$ | async as error">
+@if (error$ | async; as error) {
   <h1>An error was returned from Auth0</h1>
   <p>Something went wrong when trying to authorize your application. Please inspect the error below and ensure <code>auth_config.json</code> is configured correctly.</p>
   <div class="alert alert-danger" role="alert">
     {{error.error_description}}
   </div>
-</ng-container>
+}
 </div>

Standalone/src/app/pages/error/error.component.ts

@@ -1,25 +1,30 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '@auth0/auth0-angular';
 import { Observable, timer } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+interface Auth0Error extends Error {
+  error_description?: string;
+  error?: string;
+  error_uri?: string;
+}
+
 @Component({
   selector: 'app-error',
   templateUrl: './error.component.html',
   standalone: true,
   imports: [
-    AsyncPipe,
-    NgIf
+    AsyncPipe
   ]
 })
 export class ErrorComponent implements OnInit {
 
-  public error$: Observable<Error>;
+  public error$: Observable<Auth0Error>;
 
   constructor(private auth: AuthService, private router: Router) {
-    this.error$ = this.auth.error$;
+    this.error$ = this.auth.error$ as Observable<Auth0Error>;
   }
 
   ngOnInit() {

Standalone/src/app/pages/external-api/external-api.component.html

@@ -1,10 +1,12 @@
 <div class="container mt-5">
   <h1>External API</h1>
 
-  <div *ngIf="hasApiError" class="alert alert-danger" role="alert">
-    An error occured when trying to call the local API on port 3001. Ensure the local API is started using either `npm run dev` or `npm run
-    server:api`.
-  </div>
+  @if (hasApiError) {
+    <div class="alert alert-danger" role="alert">
+      An error occured when trying to call the local API on port 3001. Ensure the local API is started using either `npm run dev` or `npm run
+      server:api`.
+    </div>
+  }
 
   <p class="lead">Ping an external API by clicking the button below.</p>
 
@@ -15,7 +17,7 @@ <h1>External API</h1>
     API's audience value.
   </p>
 
-  <ng-container *ngIf="!audience">
+  @if (!audience) {
     <div class="alert alert-warning" role="alert">
       <p>
         You can't call the API at the moment because your application does not
@@ -50,7 +52,7 @@ <h1>External API</h1>
         restart the app and try to use the "Ping API" button below.
       </p>
     </div>
-  </ng-container>
+  }
 
   <p class="mb-5">
     Ping an external API by clicking the button below. This will call the
@@ -66,12 +68,14 @@ <h1>External API</h1>
     Ping API
   </button>
 
-  <div class="result-block-container" *ngIf="responseJson">
-    <div class="result-block" [ngClass]="{ show: !!responseJson }">
-      <h6 class="muted">Result</h6>
-      <pre>
-        <code class="js rounded" [highlight]="responseJson"></code>
-      </pre>
+  @if (responseJson) {
+    <div class="result-block-container">
+      <div class="result-block" [ngClass]="{ show: !!responseJson }">
+        <h6 class="muted">Result</h6>
+        <pre>
+          <code class="js rounded" [highlight]="responseJson"></code>
+        </pre>
+      </div>
     </div>
-  </div>
+  }
 </div>

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

@@ -1,8 +1,8 @@
-<div class="container" *ngIf="auth.isLoading$ | async; else loaded">
-  <app-loading></app-loading>
-</div>
-
-<ng-template #loaded>
+@if (auth.isLoading$ | async) {
+  <div class="container">
+    <app-loading></app-loading>
+  </div>
+} @else {
   <app-hero></app-hero>
   <app-home-content></app-home-content>
-</ng-template>
+}

Standalone/src/app/pages/profile/profile.component.html

@@ -1,22 +1,26 @@
-<div class="container mt-5" *ngIf="auth.user$ | async as user">
-  <div
-    class="row align-items-center profile-header mb-5 text-center text-md-left"
-  >
-    <div class="col-md-2">
-      <img
-        [src]="user.picture"
-        class="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
-      />
+@if (auth.user$ | async; as user) {
+  <div class="container mt-5">
+    <div
+      class="row align-items-center profile-header mb-5 text-center text-md-left"
+    >
+      <div class="col-md-2">
+        <img
+          [src]="user.picture"
+          class="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
+        />
+      </div>
+      <div class="col-md">
+        <h2>{{ user.name }}</h2>
+        <p class="lead text-muted">{{ user.email }}</p>
+      </div>
     </div>
-    <div class="col-md">
-      <h2>{{ user.name }}</h2>
-      <p class="lead text-muted">{{ user.email }}</p>
-    </div>
-  </div>
 
-  <div class="row" *ngIf="profileJson">
-    <pre
-      class="rounded"
-    ><code class="json" [highlight]="profileJson"></code></pre>
+    @if (profileJson) {
+      <div class="row">
+        <pre
+          class="rounded"
+        ><code class="json" [highlight]="profileJson"></code></pre>
+      </div>
+    }
   </div>
-</div>
+}