enabled arrow icons to jump to previous and next lessons

apps/codelab/src/app/components/slides/closing-slide/codelab-closing-slide.component.ts

@@ -1,4 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Inject, Optional } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES } from '../../../common';
 
 @Component({
   selector: 'codelab-closing-slide',
@@ -10,7 +12,17 @@ export class CodelabClosingSlideComponent implements OnInit {
   @Input() body: String;
   @Input() footer: String;
 
-  constructor() {}
+  constructor(
+    @Optional() private readonly presentation: SlidesDeckComponent,
+    @Optional() @Inject(MENU_ROUTES) readonly menuRoutes
+  ) {
+    if (this.presentation != null) {
+      this.presentation.setupPreviousNext(menuRoutes.map(p => p.path));
+    }
+
+  }
+
+
 
   ngOnInit() {}
 }

apps/codelab/src/app/components/slides/title-slide/title-slide.component.ts

@@ -1,4 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Optional, Inject } from '@angular/core';
+import { SlidesDeckComponent } from '@codelab/slides/src/lib/deck/deck.component';
+import { MENU_ROUTES } from '../../../common';
 
 @Component({
   selector: 'codelab-title-slide',
@@ -9,4 +11,14 @@ export class TitleSlideComponent {
   @Input() title: string;
   @Input() description: string;
   @Input() prereqs: string;
+
+  constructor(
+    @Optional() private readonly presentation: SlidesDeckComponent,
+    @Optional() @Inject(MENU_ROUTES) readonly menuRoutes
+  ) {
+    if (this.presentation != null) {
+      this.presentation.setupPreviousNext(menuRoutes.map(p => p.path));
+    }
+
+  }
 }

libs/slides/src/lib/arrows/slides-arrows.component.ts

@@ -1,5 +1,6 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { SlidesDeckComponent } from '../deck/deck.component';
+import { Router } from '@angular/router';
 
 /**
  * Slide arrows are used by slides deck for navigation.
@@ -17,14 +18,17 @@ export class SlidesArrowsComponent {
    */
   @HostBinding('class.shortcuts-context') context = true;
 
-  constructor(private presentation: SlidesDeckComponent) {}
+  constructor(
+    private readonly router: Router,
+    private presentation: SlidesDeckComponent
+  ) {}
 
   goToPreviousSlide() {
-    this.presentation.previousSlide();
+      this.presentation.previousSlide();
   }
 
   goToNextSlide() {
-    this.presentation.nextSlide();
+      this.presentation.nextSlide();
   }
 
   canGoNext(): boolean {

libs/slides/src/lib/deck/deck.component.ts

@@ -11,7 +11,7 @@ import {
   TemplateRef
 } from '@angular/core';
 
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'slide-deck',
@@ -27,10 +27,13 @@ export class SlidesDeckComponent {
   @Output() slideAdded = new EventEmitter<{ index: number; id: string }>();
   @HostBinding('class.has-milestone') hasMilestone = false;
   private milestone = '';
+  private previousLink: string;
+  private nextLink: string;
 
   constructor(
     private readonly cdr: ChangeDetectorRef,
-    @Optional() private readonly  route: ActivatedRoute
+    private readonly router: Router,
+    @Optional() private readonly route: ActivatedRoute
   ) {
     if (route) {
       this.milestone = route.snapshot.queryParams.milestone;
@@ -51,18 +54,45 @@ export class SlidesDeckComponent {
   }
 
   nextSlide() {
-    this.goToSlide(this.activeSlideIndex + 1);
+    if (this.activeSlideIndex + 1 < this.slides.length) {
+      this.goToSlide(this.activeSlideIndex + 1);
+    } else if (this.nextLink != null && this.nextLink !== '') {
+      this.router.navigateByUrl(this.nextLink);
+    }
   }
 
   previousSlide() {
-    this.goToSlide(this.activeSlideIndex - 1);
+    if (this.activeSlideIndex > 0) {
+      this.goToSlide(this.activeSlideIndex - 1);
+    } else if (this.previousLink != null && this.previousLink !== '') {
+      this.router.navigateByUrl(this.previousLink);
+    }
   }
 
   canGoNext(): boolean {
-    return this.activeSlideIndex + 1 < this.slides.length;
+    return this.activeSlideIndex + 1 < this.slides.length || (this.nextLink != null && this.nextLink !== '');
   }
 
   canGoPrevious(): boolean {
-    return this.activeSlideIndex > 0;
+    return this.activeSlideIndex > 0 || (this.previousLink != null && this.previousLink !== '');
+  }
+
+  public setupPreviousNext(allRoutes: string[]) {
+    this.previousLink = '';
+    this.nextLink = '';
+    let currentUrl = this.router.url;
+    if (currentUrl.startsWith('/')) {
+      currentUrl = currentUrl.substr(1);
+    }
+    const urlPaths = currentUrl.split('/');
+    if (urlPaths.length > 1) {
+      const idx = allRoutes.indexOf(urlPaths[1]);
+      if (idx > 0) {
+        this.previousLink = `/${urlPaths[0]}/${allRoutes[idx - 1]}`;
+      }
+      if (idx < (allRoutes.length - 1)) {
+        this.nextLink = `/${urlPaths[0]}/${allRoutes[idx + 1]}`;
+      }
+    }
   }
 }