update to control flow syntax

duluca · Dec 18, 2023 · fb49610 · fb49610
1 parent c84d7a9
commit fb49610
Show file tree

Hide file tree

Showing 46 changed files with 1,602 additions and 1,451 deletions.
diff --git a/projects/stage10/src/app/app.component.ts b/projects/stage10/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common'
+import { AsyncPipe } from '@angular/common'
 import { NgOptimizedImage } from '@angular/common'
 import { Component, DestroyRef, inject, OnInit } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
@@ -50,29 +50,41 @@ import { NavigationMenuComponent } from './navigation-menu/navigation-menu.compo
   // prettier-ignore
   template: `
     <div class="app-container">
-      <mat-toolbar color="primary" fxLayoutGap="8px" class="app-toolbar" [class.app-is-mobile]="media.isActive('xs')"
-        *ngIf="{
-          status: authService.authStatus$ | async,
-          user: authService.currentUser$ | async
-        } as auth;">
-        <button *ngIf="auth?.status?.isAuthenticated" mat-icon-button (click)="sidenav.toggle()">
-          <mat-icon>menu</mat-icon>
-        </button>
-        <a mat-icon-button routerLink="/home">
-          <mat-icon svgIcon="lemon"></mat-icon>
-          <span class="mat-h2" data-testid="title">LemonMart</span>
-        </a>
-        <span class="flex-spacer"></span>
-        <button *ngIf="auth?.status?.isAuthenticated" mat-mini-fab routerLink="/user/profile" matTooltip="Profile"
-          aria-label="User Profile">
-          <img alt="Profile picture" *ngIf="auth?.user?.picture" class="image-cropper" [ngSrc]="auth?.user?.picture ?? ''" width="40px" height="40px" fill />
-          <mat-icon *ngIf="!auth?.user?.picture">account_circle</mat-icon>
-        </button>
-        <button *ngIf="auth?.status?.isAuthenticated" mat-mini-fab routerLink="/user/logout" matTooltip="Logout"
-          aria-label="Logout">
-          <mat-icon>lock_open</mat-icon>
-        </button>
-      </mat-toolbar>
+      @if ({
+        status: authService.authStatus$ | async,
+        user: authService.currentUser$ | async
+        }; as auth;) {
+        <mat-toolbar color="primary" fxLayoutGap="8px" class="app-toolbar" [class.app-is-mobile]="media.isActive('xs')"
+          >
+          @if (auth?.status?.isAuthenticated) {
+            <button mat-icon-button (click)="sidenav.toggle()">
+              <mat-icon>menu</mat-icon>
+            </button>
+          }
+          <a mat-icon-button routerLink="/home">
+            <mat-icon svgIcon="lemon"></mat-icon>
+            <span class="mat-h2" data-testid="title">LemonMart</span>
+          </a>
+          <span class="flex-spacer"></span>
+          @if (auth?.status?.isAuthenticated) {
+            <button mat-mini-fab routerLink="/user/profile" matTooltip="Profile"
+              aria-label="User Profile">
+              @if (auth?.user?.picture) {
+                <img alt="Profile picture" class="image-cropper" [ngSrc]="auth?.user?.picture ?? ''" width="40px" height="40px" fill />
+              }
+              @if (!auth?.user?.picture) {
+                <mat-icon>account_circle</mat-icon>
+              }
+            </button>
+          }
+          @if (auth?.status?.isAuthenticated) {
+            <button mat-mini-fab routerLink="/user/logout" matTooltip="Logout"
+              aria-label="Logout">
+              <mat-icon>lock_open</mat-icon>
+            </button>
+          }
+        </mat-toolbar>
+      }
       <mat-sidenav-container class="app-sidenav-container">
         <mat-sidenav #sidenav [mode]="media.isActive('xs') ? 'over' : 'side'" [fixedInViewport]="media.isActive('xs')" _
           fixedTopGap="56" [(opened)]="opened">
@@ -83,10 +95,9 @@ import { NavigationMenuComponent } from './navigation-menu/navigation-menu.compo
         </mat-sidenav-content>
       </mat-sidenav-container>
     </div>
-  `,
+    `,
   standalone: true,
   imports: [
-    NgIf,
     FlexModule,
     RouterLink,
     NavigationMenuComponent,

diff --git a/projects/stage10/src/app/common/simple-dialog.component.ts b/projects/stage10/src/app/common/simple-dialog.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common'
 import { Component, Inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'
@@ -12,17 +11,19 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
     </mat-dialog-content>
     <mat-dialog-actions>
       <span class="flex-spacer"></span>
-      <button mat-button mat-dialog-close *ngIf="data.cancelText">
-        {{ data.cancelText }}
-      </button>
+      @if (data.cancelText) {
+        <button mat-button mat-dialog-close>
+          {{ data.cancelText }}
+        </button>
+      }
       <button mat-button mat-button-raised color="primary" [mat-dialog-close]="true"
         cdkFocusInitial>
         {{ data.okText }}
       </button>
     </mat-dialog-actions>
-  `,
+    `,
   standalone: true,
-  imports: [MatDialogModule, NgIf, MatButtonModule],
+  imports: [MatDialogModule, MatButtonModule],
 })
 export class SimpleDialogComponent {
   constructor(

diff --git a/projects/stage10/src/app/home/home.component.ts b/projects/stage10/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common'
+import { AsyncPipe } from '@angular/common'
 import { Component } from '@angular/core'
 
 import { AuthService } from '../auth/auth.service'
@@ -14,19 +14,20 @@ import { LoginComponent } from '../login/login.component'
     `,
   ],
   template: `
-    <div *ngIf="(authService.authStatus$ | async)?.isAuthenticated; else doLogin">
-      <div class="mat-headline-1">This is LemonMart! The place where</div>
-      <div class="mat-headline-1">
-        You get a lemon, you get a lemon, you get a lemon...
+    @if ((authService.authStatus$ | async)?.isAuthenticated) {
+      <div>
+        <div class="mat-headline-1">This is LemonMart! The place where</div>
+        <div class="mat-headline-1">
+          You get a lemon, you get a lemon, you get a lemon...
+        </div>
+        <div class="mat-headline-1">Everybody gets a lemon.</div>
       </div>
-      <div class="mat-headline-1">Everybody gets a lemon.</div>
-    </div>
-    <ng-template #doLogin>
+    } @else {
       <app-login></app-login>
-    </ng-template>
+    }
   `,
   standalone: true,
-  imports: [NgIf, LoginComponent, AsyncPipe],
+  imports: [LoginComponent, AsyncPipe],
 })
 export class HomeComponent {
   constructor(public authService: AuthService) {}

diff --git a/projects/stage10/src/app/login/login.component.html b/projects/stage10/src/app/login/login.component.html
@@ -15,12 +15,12 @@
               placeholder="E-mail"
               aria-label="E- mail"
               formControlName="email" />
-            <mat-error *ngIf="loginForm.get('email')?.hasError('required')">
-              E-mail is required
-            </mat-error>
-            <mat-error *ngIf="loginForm.get('email')?.hasError('email')">
-              E-mail is not valid
-            </mat-error>
+            @if (loginForm.get('email')?.hasError('required')) {
+              <mat-error> E-mail is required </mat-error>
+            }
+            @if (loginForm.get('email')?.hasError('email')) {
+              <mat-error> E-mail is not valid </mat-error>
+            }
           </mat-form-field>
         </div>
         <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px">
@@ -34,19 +34,21 @@
               type="password"
               formControlName="password" />
             <mat-hint>Minimum 8 characters</mat-hint>
-            <mat-error *ngIf="loginForm.get('password')?.hasError('required')">
-              Password is required
-            </mat-error>
-            <mat-error *ngIf="loginForm.get('password')?.hasError('minlength')">
-              Password is at least 8 characters long
-            </mat-error>
-            <mat-error *ngIf="loginForm.get('password')?.hasError('maxlength')">
-              Password cannot be longer than 50 characters
-            </mat-error>
+            @if (loginForm.get('password')?.hasError('required')) {
+              <mat-error> Password is required </mat-error>
+            }
+            @if (loginForm.get('password')?.hasError('minlength')) {
+              <mat-error> Password is at least 8 characters long </mat-error>
+            }
+            @if (loginForm.get('password')?.hasError('maxlength')) {
+              <mat-error> Password cannot be longer than 50 characters </mat-error>
+            }
           </mat-form-field>
         </div>
         <div fxLayout="row" class="top-pad">
-          <div *ngIf="loginError" class="mat-caption error">{{ loginError }}</div>
+          @if (loginError) {
+            <div class="mat-caption error">{{ loginError }}</div>
+          }
           <div class="flex-spacer"></div>
           <button
             mat-raised-button

diff --git a/projects/stage10/src/app/login/login.component.ts b/projects/stage10/src/app/login/login.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common'
 import { Component, DestroyRef, inject, OnInit } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms'
@@ -40,7 +39,6 @@ import { EmailValidation, PasswordValidation } from '../common/validations'
     MatIconModule,
     MatFormFieldModule,
     MatInputModule,
-    NgIf,
     MatButtonModule,
   ],
 })

diff --git a/projects/stage11/src/app/app.component.ts b/projects/stage11/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common'
+import { AsyncPipe } from '@angular/common'
 import { NgOptimizedImage } from '@angular/common'
 import { Component, DestroyRef, inject, OnInit } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
@@ -50,29 +50,41 @@ import { NavigationMenuComponent } from './navigation-menu/navigation-menu.compo
   // prettier-ignore
   template: `
     <div class="app-container">
-      <mat-toolbar color="primary" fxLayoutGap="8px" class="app-toolbar" [class.app-is-mobile]="media.isActive('xs')"
-        *ngIf="{
-          status: authService.authStatus$ | async,
-          user: authService.currentUser$ | async
-        } as auth;">
-        <button *ngIf="auth?.status?.isAuthenticated" mat-icon-button (click)="sidenav.toggle()">
-          <mat-icon>menu</mat-icon>
-        </button>
-        <a mat-icon-button routerLink="/home">
-          <mat-icon svgIcon="lemon"></mat-icon>
-          <span class="mat-h2" data-testid="title">LemonMart</span>
-        </a>
-        <span class="flex-spacer"></span>
-        <button *ngIf="auth?.status?.isAuthenticated" mat-mini-fab routerLink="/user/profile" matTooltip="Profile"
-          aria-label="User Profile">
-          <img alt="Profile picture" *ngIf="auth?.user?.picture" class="image-cropper" [ngSrc]="auth?.user?.picture ?? ''" width="40px" height="40px" fill />
-          <mat-icon *ngIf="!auth?.user?.picture">account_circle</mat-icon>
-        </button>
-        <button *ngIf="auth?.status?.isAuthenticated" mat-mini-fab routerLink="/user/logout" matTooltip="Logout"
-          aria-label="Logout">
-          <mat-icon>lock_open</mat-icon>
-        </button>
-      </mat-toolbar>
+      @if ({
+        status: authService.authStatus$ | async,
+        user: authService.currentUser$ | async
+        }; as auth;) {
+        <mat-toolbar color="primary" fxLayoutGap="8px" class="app-toolbar" [class.app-is-mobile]="media.isActive('xs')"
+          >
+          @if (auth?.status?.isAuthenticated) {
+            <button mat-icon-button (click)="sidenav.toggle()">
+              <mat-icon>menu</mat-icon>
+            </button>
+          }
+          <a mat-icon-button routerLink="/home">
+            <mat-icon svgIcon="lemon"></mat-icon>
+            <span class="mat-h2" data-testid="title">LemonMart</span>
+          </a>
+          <span class="flex-spacer"></span>
+          @if (auth?.status?.isAuthenticated) {
+            <button mat-mini-fab routerLink="/user/profile" matTooltip="Profile"
+              aria-label="User Profile">
+              @if (auth?.user?.picture) {
+                <img alt="Profile picture" class="image-cropper" [ngSrc]="auth?.user?.picture ?? ''" width="40px" height="40px" fill />
+              }
+              @if (!auth?.user?.picture) {
+                <mat-icon>account_circle</mat-icon>
+              }
+            </button>
+          }
+          @if (auth?.status?.isAuthenticated) {
+            <button mat-mini-fab routerLink="/user/logout" matTooltip="Logout"
+              aria-label="Logout">
+              <mat-icon>lock_open</mat-icon>
+            </button>
+          }
+        </mat-toolbar>
+      }
       <mat-sidenav-container class="app-sidenav-container">
         <mat-sidenav #sidenav [mode]="media.isActive('xs') ? 'over' : 'side'" [fixedInViewport]="media.isActive('xs')" _
           fixedTopGap="56" [(opened)]="opened">
@@ -83,10 +95,9 @@ import { NavigationMenuComponent } from './navigation-menu/navigation-menu.compo
         </mat-sidenav-content>
       </mat-sidenav-container>
     </div>
-  `,
+    `,
   standalone: true,
   imports: [
-    NgIf,
     FlexModule,
     RouterLink,
     NavigationMenuComponent,

diff --git a/projects/stage11/src/app/common/simple-dialog.component.ts b/projects/stage11/src/app/common/simple-dialog.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common'
 import { Component, Inject } from '@angular/core'
 import { MatButtonModule } from '@angular/material/button'
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'
@@ -12,17 +11,19 @@ import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/materia
     </mat-dialog-content>
     <mat-dialog-actions>
       <span class="flex-spacer"></span>
-      <button mat-button mat-dialog-close *ngIf="data.cancelText">
-        {{ data.cancelText }}
-      </button>
+      @if (data.cancelText) {
+        <button mat-button mat-dialog-close>
+          {{ data.cancelText }}
+        </button>
+      }
       <button mat-button mat-button-raised color="primary" [mat-dialog-close]="true"
         cdkFocusInitial>
         {{ data.okText }}
       </button>
     </mat-dialog-actions>
-  `,
+    `,
   standalone: true,
-  imports: [MatDialogModule, NgIf, MatButtonModule],
+  imports: [MatDialogModule, MatButtonModule],
 })
 export class SimpleDialogComponent {
   constructor(

diff --git a/projects/stage11/src/app/home/home.component.ts b/projects/stage11/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common'
+import { AsyncPipe } from '@angular/common'
 import { Component } from '@angular/core'
 
 import { AuthService } from '../auth/auth.service'
@@ -14,19 +14,20 @@ import { LoginComponent } from '../login/login.component'
     `,
   ],
   template: `
-    <div *ngIf="(authService.authStatus$ | async)?.isAuthenticated; else doLogin">
-      <div class="mat-headline-1">This is LemonMart! The place where</div>
-      <div class="mat-headline-1">
-        You get a lemon, you get a lemon, you get a lemon...
+    @if ((authService.authStatus$ | async)?.isAuthenticated) {
+      <div>
+        <div class="mat-headline-1">This is LemonMart! The place where</div>
+        <div class="mat-headline-1">
+          You get a lemon, you get a lemon, you get a lemon...
+        </div>
+        <div class="mat-headline-1">Everybody gets a lemon.</div>
       </div>
-      <div class="mat-headline-1">Everybody gets a lemon.</div>
-    </div>
-    <ng-template #doLogin>
+    } @else {
       <app-login></app-login>
-    </ng-template>
+    }
   `,
   standalone: true,
-  imports: [NgIf, LoginComponent, AsyncPipe],
+  imports: [LoginComponent, AsyncPipe],
 })
 export class HomeComponent {
   constructor(public authService: AuthService) {}