Newroute and Theming tutorials

Author: jweisman

cloudapp/src/app/app-routing.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MainComponent } from './main/main.component';
+import { NewrouteComponent } from './newroute/newroute.component';
+import { ThemingComponent } from './theming/theming.component';
 
 const routes: Routes = [
-  { path: '', component: MainComponent }
+  { path: '', component: MainComponent },
+  { path: 'newroute', component: NewrouteComponent },
+  { path: 'theming', component: ThemingComponent },
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -9,6 +9,8 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { MainComponent } from './main/main.component';
 import { TopmenuComponent } from './topmenu/topmenu.component';
+import { NewrouteComponent } from './newroute/newroute.component';
+import { ThemingComponent } from './theming/theming.component';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -21,7 +23,9 @@ export function getToastrModule() {
    declarations: [
       AppComponent,
       MainComponent,
-      TopmenuComponent
+      TopmenuComponent,
+      NewrouteComponent,
+      ThemingComponent,      
    ],
    imports: [
       MaterialModule,

cloudapp/src/app/main/main.component.html

@@ -4,6 +4,7 @@ <h1>
   </h1>
   <p>This app includes all of the code referenced in the <a href="https://developers.exlibrisgroup.com/cloudapps/tutorials" target="_blank">tutorials section of the CloudApps documentation</a>. The following menu will lead you to the component referenced in the corresponding tutorial:</p>
   <ul>
-
+    <li><a [routerLink]="['newroute']">Adding additional routes</a></li>
+    <li><a [routerLink]="['theming']">Using Material Components & Theming</a></li>
   </ul>
 </section>

cloudapp/src/app/main/main.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
 
 @Component({
   selector: 'app-main',
@@ -7,8 +8,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class MainComponent implements OnInit {
 
-  constructor() { }
+  constructor(private appService: AppService) { }
 
-  ngOnInit() { }
+  ngOnInit() { 
+    this.appService.setTitle('');
+  }
 
 }

cloudapp/src/app/newroute/newroute.component.html

@@ -0,0 +1 @@
+<p>newroute works!</p>

cloudapp/src/app/newroute/newroute.component.scss

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
+
+@Component({
+  selector: 'app-newroute',
+  templateUrl: './newroute.component.html',
+  styleUrls: ['./newroute.component.scss']
+})
+export class NewrouteComponent implements OnInit {
+
+  constructor(private appService: AppService) { }
+
+  ngOnInit() {
+    this.appService.setTitle('New Route');
+  }
+
+}

cloudapp/src/app/newroute/newroute.component.ts

@@ -0,0 +1,3 @@
+<p>Here's a button using the primary color:</p>
+<p><button mat-raised-button color="primary">Primary</button></p>
+<div class="themed-box">And here's a box with a border color determined by the theme.</div>

cloudapp/src/app/theming/theming.component.html

@@ -0,0 +1,4 @@
+.themed-box {
+  padding: 10px;
+  border: 5px solid;
+}

cloudapp/src/app/theming/theming.component.scss

@@ -0,0 +1,5 @@
+@mixin theming-component-theme($theme, $typgraphy) {
+  .themed-box {
+    border-color: mat-color(map-get($theme, primary));
+  }
+}