5: Add In-app Navigation

b) Add RouterOutlet + Add a navigation link (routerLink)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index e69de29..c62f266 100644 (file)
--- 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 (file)
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,3 +1,6 @@
 <h1>{{title}}</h1>
 <h1>{{title}}</h1>

-<app-heroes></app-heroes>
+<nav>
+  <a routerLink="/heroes">Heroes</a>
+</nav>
+<router-outlet></router-outlet>

 <app-messages></app-messages>
 <app-messages></app-messages>