refactor example to control flow syntax

Author: timdeschryver

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>

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);