From bc03f09800ac1bdb63407e8f77852c03959f519a Mon Sep 17 00:00:00 2001
From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com>
Date: Wed, 15 May 2024 11:11:15 +0200
Subject: [PATCH] refactor example to control flow syntax

---
 .../app/navigation/navigation.component.html  | 31 ++++++-------------
 .../app/navigation/navigation.component.ts    |  4 +--
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.html b/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.html
index 9285d916..31c41a33 100644
--- a/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.html
+++ b/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.html
@@ -15,40 +15,29 @@
   </button>
   <div class="collapse navbar-collapse" id="topNavbarCollapse">
     <ul class="mr-auto navbar-nav">
+      @if (authenticated().isAuthenticated) {
       <li class="nav-item">
-        <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['home']"
-          >home</a
-        >
+        <a class="nav-link" [routerLink]="['home']">home</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['protected']"
-          >protected</a
-        >
+        <a class="nav-link" [routerLink]="['protected']">protected</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['forbidden']"
-          >forbidden</a
-        >
+        <a class="nav-link" [routerLink]="['forbidden']">forbidden</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" *ngIf="authenticated().isAuthenticated" [routerLink]="['customers']"
-          >lazy customers</a
-        >
+        <a class="nav-link" [routerLink]="['customers']">lazy customers</a>
       </li>
       <li class="nav-item">
-        <a
-          class="nav-link"
-          *ngIf="!authenticated().isAuthenticated"
-          [routerLink]="['protected']"
-          >Route to 'protected' Route & Auto Login</a
-        >
+        <a class="nav-link" (click)="logout()">Logout</a>
       </li>
+      } @else {
       <li class="nav-item">
-        <a class="nav-link" *ngIf="authenticated().isAuthenticated" (click)="logout()"
-          >Logout</a
+        <a class="nav-link" [routerLink]="['protected']"
+          >Route to 'protected' Route & Auto Login</a
         >
       </li>
+      }
     </ul>
-    <ul class="navbar-nav"></ul>
   </div>
 </nav>
diff --git a/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.ts b/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.ts
index e148700b..f74b1615 100644
--- a/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.ts
+++ b/projects/sample-code-flow-standalone/src/app/navigation/navigation.component.ts
@@ -1,4 +1,4 @@
-import { NgIf } from '@angular/common';
+
 import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
@@ -8,7 +8,7 @@ import { OidcSecurityService } from 'angular-auth-oidc-client';
   templateUrl: 'navigation.component.html',
   styleUrls: ['navigation.component.css'],
   standalone: true,
-  imports: [RouterLink, NgIf],
+  imports: [RouterLink],
 })
 export class NavigationComponent  {
   private readonly oidcSecurityService = inject(OidcSecurityService);