Merge pull request #1941 from timdeschryver/control-flow-example

refactor example to control flow syntax
damienbod · May 15, 2024 · d753406 · d753406
2 parents dcd6f7a + bc03f09
commit d753406
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 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
@@ -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
@@ -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);