Session4 Routing

Author: ircube

src/app/app.component.html

@@ -1,7 +1,10 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<i class="material-icons">lightbulb_outline</i>
+
+<div style="height:70px; width:100%;color:white; background-color:blue">
+  Angular Sessions
+</div>
+
 <div style="text-align:center">
-  <app-room></app-room>
+  <router-outlet></router-outlet>
 </div>
 
 

src/app/app.component.ts

@@ -5,6 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent{
   title = 'app';
 }

src/app/app.module.ts

@@ -1,5 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
 
 import { AppComponent } from './app.component';
 import { PersonComponent } from './component/person/person.component';
@@ -11,6 +13,14 @@ import { RoomComponent } from './component/room/room.component';
 import { LightSwitchService } from "app/light-switch.service";
 
 
+
+const appRoutes: Routes = [
+  { path: '', component:  RoomComponent },
+  { path: 'light', component: LightBulbComponent }
+];
+
+
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -22,7 +32,10 @@ import { LightSwitchService } from "app/light-switch.service";
     RoomComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    RouterModule.forRoot(
+      appRoutes,
+    )
   ],
   providers: [LightSwitchService],
   bootstrap: [AppComponent]

src/app/component/light-bulb/light-bulb.component.html

@@ -1,3 +1,5 @@
 <p>
   Light Bulb Status: {{ isOn?'ON':'OFF' }} 
 </p>
+
+<a routerLink="/" routerLinkActive="active"> Go to Home  </a>

src/app/component/room/room.component.html

@@ -2,4 +2,5 @@
   Room:
   <app-ceiling></app-ceiling>
   <app-wall></app-wall>
+  <a routerLink="/light" routerLinkActive="active"> Go to Light </a>
 </div>