From 01d86dbcab0d62868039039611bfd50c3eaada4a Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Sun, 3 May 2020 14:20:34 +0200
Subject: [PATCH] 5: Add In-app Navigation b) Add RouterOutlet + Add a
 navigation link (routerLink)

---
 src/app/app.component.css  | 28 ++++++++++++++++++++++++++++
 src/app/app.component.html |  5 ++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29..c62f266 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -0,0 +1,28 @@
+/* AppComponent's private CSS styles */
+h1 {
+  font-size: 1.2em;
+  margin-bottom: 0;
+}
+h2 {
+  font-size: 2em;
+  margin-top: 0;
+  padding-top: 0;
+}
+nav a {
+  padding: 5px 10px;
+  text-decoration: none;
+  margin-top: 10px;
+  display: inline-block;
+  background-color: #eee;
+  border-radius: 4px;
+}
+nav a:visited, a:link {
+  color: #334953;
+}
+nav a:hover {
+  color: #039be5;
+  background-color: #cfd8dc;
+}
+nav a.active {
+  color: #039be5;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index cb45ac4..aeb56ff 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,6 @@
 <h1>{{title}}</h1>
-<app-heroes></app-heroes>
+<nav>
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<router-outlet></router-outlet>
 <app-messages></app-messages>
-- 
2.20.1