feat: Add the version number to the page.

src/app/pages/component-sidenav/component-sidenav.spec.ts

@@ -29,7 +29,7 @@ describe('ComponentSidenav', () => {
       expect(component.sidenav instanceof MatSidenav).toBeTruthy();
       expect(component.isScreenSmall()).toBeTruthy();
       expect(component.sidenav.opened).toBe(false);
-    })
+    });
   });
 
   it('should show a link for each item in doc items categories', () => {

src/app/shared/footer/footer.html

@@ -1,19 +1,22 @@
 <footer class="docs-footer">
   <div class="docs-footer-list">
-    <div class="footer-logo">
-      <img class="docs-footer-angular-logo"
-        src="../../../assets/img/homepage/angular-white-transparent.svg"
-        alt="angular">
+    <div class="docs-footer-logo">
+      <div class="footer-logo">
+        <img class="docs-footer-angular-logo"
+          src="../../../assets/img/homepage/angular-white-transparent.svg"
+          alt="angular">
+        <span><a href="https://angular.io">Learn Angular</a></span>
+      </div>
     </div>
 
-    <div class="docs-footer-links">
-      <ul>
-        <li> <a href="https://angular.io">Learn Angular</a> </li>
-      </ul>
+    <div class="docs-footer-version">
+      <span class="version">Current Version: {{version}}</span>
     </div>
 
     <div class="docs-footer-copyright">
-      <p>Powered by Google ©2010-2018. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.</p>
+      <span>Powered by Google ©2010-2018.</span>
+      <span>Code licensed under an MIT-style License.</span>
+      <span>Documentation licensed under CC BY 4.0.</span>
     </div>
   </div>
 </footer>

src/app/shared/footer/footer.scss

@@ -11,25 +11,39 @@
   padding: 8px;
 }
 
+.docs-footer-logo {
+  flex: 1;
+}
+
 .docs-footer-angular-logo {
   height: 50px;
 }
 
+.docs-footer-version {
+  flex: 1;
+  text-align: center;
+}
+
 .docs-footer-copyright {
   display: flex;
   flex: 1;
   justify-content: flex-end;
+  flex-direction: column;
+  min-width: 225px;
+  text-align: center;
 }
 
-.docs-footer-links ul {
-  list-style: none;
+.docs-footer-logo span {
+  display: inline-block;
+  line-height: 50px;
   margin: 0 40px;
-  padding: 0;
+  vertical-align: bottom;
 
   a {
     font-size: 16px;
     padding: 0;
     text-decoration: none;
+    color: inherit;
 
     &:hover {
       text-decoration: underline;

src/app/shared/footer/footer.ts

@@ -1,11 +1,20 @@
 import {Component, NgModule} from '@angular/core';
+import {VERSION} from '@angular/material';
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.html',
   styleUrls: ['./footer.scss']
 })
-export class Footer { }
+export class Footer {
+  get version() {
+    const version = VERSION.full.match(/\d+\.\d+\.\d+/);
+    if (version) {
+      return version[0];
+    }
+    return '';
+  }
+}
 
 
 @NgModule({

src/app/shared/navbar/navbar.ts

@@ -1,6 +1,6 @@
 import {Component, NgModule} from '@angular/core';
-import {MatButtonModule, MatMenuModule} from '@angular/material';
 import {CommonModule} from '@angular/common';
+import {MatButtonModule, MatMenuModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {ThemePickerModule} from '../theme-picker/theme-picker';
 import {SECTIONS} from '../documentation-items/documentation-items';

src/app/shared/navigation-focus/navigation-focus.ts

@@ -1,5 +1,4 @@
-import {NgModule, Injectable, OnInit, Directive, Input, ElementRef, Renderer2} from '@angular/core';
-import {Subscription} from 'rxjs/Subscription';
+import {NgModule, OnInit, Directive, ElementRef} from '@angular/core';
 
 /** The timeout id of the previous focus change. */
 let lastTimeoutId = -1;