From b63e6421733cb1c68ee2d28b6c5aaaf311345b5d Mon Sep 17 00:00:00 2001
From: Nils Dittberner <nils@dittberner.it>
Date: Tue, 21 Nov 2017 10:21:19 +0100
Subject: [PATCH] 06-77 Make navigation work

---
 src/app/app.component.html           | 6 +++---
 src/app/app.component.ts             | 5 +++++
 src/app/header/header.component.html | 4 ++--
 src/app/header/header.component.ts   | 6 +++++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 96ff2b0..1c65680 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,9 +1,9 @@
-<app-header></app-header>
+<app-header (featureSelected)="onNavigate($event)"></app-header>
 <div class="container">
     <div class="row">
         <div class="col-md-12">
-            <app-recipes></app-recipes>
-            <app-shopping-list></app-shopping-list>
+            <app-recipes *ngIf="loadedFeature === 'recipe'"></app-recipes>
+            <app-shopping-list *ngIf="loadedFeature !== 'recipe'"></app-shopping-list>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 68478a8..767f161 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,4 +6,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
+  loadedFeature = 'recipe';
+
+  onNavigate(feature: string) {
+    this.loadedFeature = feature;
+  }
 }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 262d872..6ce6b1e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -6,8 +6,8 @@
 
         <div class="navbar-default">
             <ul class="nav navbar-nav">
-                <li><a href="#">Recipes</a></li>
-                <li><a href="#">Shopping List</a></li>
+                <li><a href="#" (click)="onSelect('recipe')">Recipes</a></li>
+                <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <li class="dropdown">
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 74db6e5..81f68ee 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,9 +1,13 @@
-import { Component } from "@angular/core";
+import { Component, EventEmitter, Output } from "@angular/core";
 
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html'
 })
 export class HeaderComponent {
+    @Output() featureSelected = new EventEmitter<string>();
 
+    onSelect(feature: string) {
+        this.featureSelected.emit(feature);
+    }
 }
\ No newline at end of file