5: Add In-app Navigation
authorKai Moritz <kai@juplo.de>
Sun, 3 May 2020 12:20:34 +0000 (14:20 +0200)
committerKai Moritz <kai@juplo.de>
Sun, 3 May 2020 12:20:34 +0000 (14:20 +0200)
b) Add RouterOutlet + Add a navigation link (routerLink)

src/app/app.component.css
src/app/app.component.html

index e69de29..c62f266 100644 (file)
@@ -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;
+}
index cb45ac4..aeb56ff 100644 (file)
@@ -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>