From 07157ba6cc92d2a08319f16f247b8986d7e47453 Mon Sep 17 00:00:00 2001
From: Getsov <valsvetget@abv.bg>
Date: Wed, 26 Jul 2023 00:23:14 +0300
Subject: [PATCH 1/4] Switching from a function in a template to a variable to
 fix the navigation issue

---
 .../src/app/main-navigation.component.ts      | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/bug-cd/src/app/main-navigation.component.ts b/apps/bug-cd/src/app/main-navigation.component.ts
index c30281a99..7fc5700a5 100644
--- a/apps/bug-cd/src/app/main-navigation.component.ts
+++ b/apps/bug-cd/src/app/main-navigation.component.ts
@@ -2,6 +2,7 @@ import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { Component, Input, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { FakeServiceService } from './fake.service';
+import { tap } from 'rxjs';
 
 interface MenuItem {
   path: string;
@@ -34,7 +35,7 @@ interface MenuItem {
   },
 })
 export class NavigationComponent {
-  @Input() menus!: MenuItem[];
+  @Input() menus: MenuItem[] | undefined;
 }
 
 @Component({
@@ -43,20 +44,34 @@ export class NavigationComponent {
   template: `
     <ng-container *ngIf="info$ | async as info">
       <ng-container *ngIf="info !== null; else noInfo">
-        <app-nav [menus]="getMenu(info)" />
+        <!-- Switching to a variable, instead of calling a function everytime a CD hits -->
+        <app-nav [menus]="menus" />
       </ng-container>
     </ng-container>
 
     <ng-template #noInfo>
-      <app-nav [menus]="getMenu('')" />
+      <!-- Switching to a variable, instead of calling a function everytime a CD hits -->
+      <app-nav [menus]="menus" />
     </ng-template>
   `,
   host: {},
 })
 export class MainNavigationComponent {
   private fakeBackend = inject(FakeServiceService);
-
-  readonly info$ = this.fakeBackend.getInfoFromBackend();
+  info$: any;
+  menus: MenuItem[] = [];
+  constructor() {
+    this.info$ = this.fakeBackend.getInfoFromBackend().pipe(
+      // Using tap operator to update menus via the function every time info$ changes
+      tap((info) => {
+        if (info !== null) {
+          this.menus = this.getMenu(info);
+        } else {
+          this.menus = this.getMenu('');
+        }
+      })
+    );
+  }
 
   getMenu(prop: string) {
     return [

From d27876f2c9769fd095640fca3076fce5cd7803e0 Mon Sep 17 00:00:00 2001
From: Getsov <valsvetget@abv.bg>
Date: Wed, 26 Jul 2023 20:21:56 +0300
Subject: [PATCH 2/4] from imperative to declarative

---
 .../src/app/main-navigation.component.ts      | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/apps/bug-cd/src/app/main-navigation.component.ts b/apps/bug-cd/src/app/main-navigation.component.ts
index 7fc5700a5..516c14f4b 100644
--- a/apps/bug-cd/src/app/main-navigation.component.ts
+++ b/apps/bug-cd/src/app/main-navigation.component.ts
@@ -2,7 +2,7 @@ import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { Component, Input, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { FakeServiceService } from './fake.service';
-import { tap } from 'rxjs';
+import { Observable, map, of } from 'rxjs';
 
 interface MenuItem {
   path: string;
@@ -35,45 +35,37 @@ interface MenuItem {
   },
 })
 export class NavigationComponent {
-  @Input() menus: MenuItem[] | undefined;
+  @Input() menus: MenuItem[] | undefined | null;
 }
 
 @Component({
   standalone: true,
   imports: [NavigationComponent, NgIf, AsyncPipe],
   template: `
-    <ng-container *ngIf="info$ | async as info">
-      <ng-container *ngIf="info !== null; else noInfo">
-        <!-- Switching to a variable, instead of calling a function everytime a CD hits -->
-        <app-nav [menus]="menus" />
-      </ng-container>
+    <ng-container *ngIf="menus$ | async as menus; else noInfo">
+      <!-- Switching to Observable, instead of calling a function everytime a CD hits -->
+      <app-nav [menus]="menus" />
     </ng-container>
 
     <ng-template #noInfo>
-      <!-- Switching to a variable, instead of calling a function everytime a CD hits -->
-      <app-nav [menus]="menus" />
+      <!-- Switching to Observable, instead of calling a function everytime a CD hits -->
+      <app-nav [menus]="emptyMenu$ | async" />
     </ng-template>
   `,
   host: {},
 })
 export class MainNavigationComponent {
   private fakeBackend = inject(FakeServiceService);
-  info$: any;
-  menus: MenuItem[] = [];
+  menus$!: Observable<MenuItem[]>;
+  emptyMenu$!: Observable<MenuItem[]>;
   constructor() {
-    this.info$ = this.fakeBackend.getInfoFromBackend().pipe(
-      // Using tap operator to update menus via the function every time info$ changes
-      tap((info) => {
-        if (info !== null) {
-          this.menus = this.getMenu(info);
-        } else {
-          this.menus = this.getMenu('');
-        }
-      })
-    );
+    this.menus$ = this.fakeBackend
+      .getInfoFromBackend()
+      .pipe(map((info) => this.getMenu(info || '')));
+    this.emptyMenu$ = of(this.getMenu(''));
   }
 
-  getMenu(prop: string) {
+  getMenu(prop: string): MenuItem[] {
     return [
       { path: '/foo', name: `Foo ${prop}` },
       { path: '/bar', name: `Bar ${prop}` },

From 86d854c40bfd159dad03b38f4cc8c0ddec35e37c Mon Sep 17 00:00:00 2001
From: Getsov <valsvetget@abv.bg>
Date: Wed, 26 Jul 2023 20:46:54 +0300
Subject: [PATCH 3/4] optimizations for no undefined Input() and simplify the
 MainNavigationComponent

---
 .../src/app/main-navigation.component.ts       | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/apps/bug-cd/src/app/main-navigation.component.ts b/apps/bug-cd/src/app/main-navigation.component.ts
index 516c14f4b..c8795c96b 100644
--- a/apps/bug-cd/src/app/main-navigation.component.ts
+++ b/apps/bug-cd/src/app/main-navigation.component.ts
@@ -2,7 +2,7 @@ import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { Component, Input, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { FakeServiceService } from './fake.service';
-import { Observable, map, of } from 'rxjs';
+import { Observable, map } from 'rxjs';
 
 interface MenuItem {
   path: string;
@@ -35,34 +35,22 @@ interface MenuItem {
   },
 })
 export class NavigationComponent {
-  @Input() menus: MenuItem[] | undefined | null;
+  @Input() menus!: MenuItem[];
 }
 
 @Component({
   standalone: true,
   imports: [NavigationComponent, NgIf, AsyncPipe],
-  template: `
-    <ng-container *ngIf="menus$ | async as menus; else noInfo">
-      <!-- Switching to Observable, instead of calling a function everytime a CD hits -->
-      <app-nav [menus]="menus" />
-    </ng-container>
-
-    <ng-template #noInfo>
-      <!-- Switching to Observable, instead of calling a function everytime a CD hits -->
-      <app-nav [menus]="emptyMenu$ | async" />
-    </ng-template>
-  `,
+  template: ` <app-nav [menus]="(menus$ | async)!" /> `,
   host: {},
 })
 export class MainNavigationComponent {
   private fakeBackend = inject(FakeServiceService);
   menus$!: Observable<MenuItem[]>;
-  emptyMenu$!: Observable<MenuItem[]>;
   constructor() {
     this.menus$ = this.fakeBackend
       .getInfoFromBackend()
       .pipe(map((info) => this.getMenu(info || '')));
-    this.emptyMenu$ = of(this.getMenu(''));
   }
 
   getMenu(prop: string): MenuItem[] {

From 199b71c7c6c7dc759837f056c6f3db12d5259f6d Mon Sep 17 00:00:00 2001
From: Getsov <valsvetget@abv.bg>
Date: Thu, 27 Jul 2023 23:08:54 +0300
Subject: [PATCH 4/4] removing reassigning of the menus$ Observable

---
 apps/bug-cd/src/app/main-navigation.component.ts | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/bug-cd/src/app/main-navigation.component.ts b/apps/bug-cd/src/app/main-navigation.component.ts
index c8795c96b..051288f86 100644
--- a/apps/bug-cd/src/app/main-navigation.component.ts
+++ b/apps/bug-cd/src/app/main-navigation.component.ts
@@ -2,7 +2,7 @@ import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { Component, Input, inject } from '@angular/core';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 import { FakeServiceService } from './fake.service';
-import { Observable, map } from 'rxjs';
+import { map } from 'rxjs';
 
 interface MenuItem {
   path: string;
@@ -46,12 +46,9 @@ export class NavigationComponent {
 })
 export class MainNavigationComponent {
   private fakeBackend = inject(FakeServiceService);
-  menus$!: Observable<MenuItem[]>;
-  constructor() {
-    this.menus$ = this.fakeBackend
-      .getInfoFromBackend()
-      .pipe(map((info) => this.getMenu(info || '')));
-  }
+  menus$ = this.fakeBackend
+    .getInfoFromBackend()
+    .pipe(map((info) => this.getMenu(info || '')));
 
   getMenu(prop: string): MenuItem[] {
     return [