Use the navigation service in the fuse-navigation for easier navigation swap

src/@fuse/components/navigation/navigation.component.ts

@@ -1,4 +1,8 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
     selector     : 'fuse-navigation',
@@ -6,7 +10,7 @@ import { Component, Input, ViewEncapsulation } from '@angular/core';
     styleUrls    : ['./navigation.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavigationComponent
+export class FuseNavigationComponent implements OnInit
 {
     @Input()
     layout = 'vertical';
@@ -14,11 +18,37 @@ export class FuseNavigationComponent
     @Input()
     navigation: any;
 
+    // Private
+    private _unsubscribeAll: Subject<any>;
+
     /**
      * Constructor
      */
-    constructor()
+    constructor(
+        private _fuseNavigationService: FuseNavigationService
+    )
     {
+        // Set the private defaults
+        this._unsubscribeAll = new Subject();
+    }
 
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Load the navigation either from the input or from the service
+        this.navigation = this.navigation || this._fuseNavigationService.getCurrentNavigation();
+
+        // Subscribe to the current navigation changes
+        this._fuseNavigationService.onNavigationChanged
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((key) => {
+                this._fuseNavigationService.getNavigation(key);
+            });
     }
 }

src/app/layout/components/navbar/navbar.component.html

@@ -23,7 +23,7 @@
 
         <div class="navbar-content" fusePerfectScrollbar
              [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
-            <fuse-navigation [navigation]="navigation" layout="vertical"></fuse-navigation>
+            <fuse-navigation layout="vertical"></fuse-navigation>
         </div>
 
     </div>
@@ -33,7 +33,7 @@
 <ng-container *ngIf="layout == 'horizontal'">
 
     <div class="navbar-horizontal">
-        <fuse-navigation [navigation]="navigation" layout="horizontal"></fuse-navigation>
+        <fuse-navigation layout="horizontal"></fuse-navigation>
     </div>
 
 </ng-container>