feat(docs): add page titles to doc pages angular#189 (angular#220)

Author: amcdnl

src/app/pages/component-category-list/component-category-list.spec.ts

@@ -21,7 +21,7 @@ describe('ComponentCategoryList', () => {
     spyOn(component, 'ngOnInit').and.callThrough();
     fixture.detectChanges();
     expect(component.ngOnInit).toHaveBeenCalled();
-    expect(component._componentPageTitle.title).toEqual('Component Library');
+    expect(component._componentPageTitle.title).toEqual('Component Categories');
   });
 
   it('should render a card for every category', () => {

src/app/pages/component-category-list/component-category-list.ts

@@ -17,7 +17,7 @@ export class ComponentCategoryList {
               public _componentPageTitle: ComponentPageTitle) {}
 
   ngOnInit() {
-    this._componentPageTitle.title = 'Component Library';
+    this._componentPageTitle.title = 'Component Categories';
   }
 }
 

src/app/pages/guide-list/guide-list.ts

@@ -1,24 +1,29 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, OnInit} from '@angular/core';
 import {GuideItems} from '../../shared/guide-items/guide-items';
 import {MdListModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {FooterModule} from '../../shared/footer/footer';
 import {CommonModule} from '@angular/common';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
   selector: 'app-guides',
   templateUrl: './guide-list.html',
   styleUrls: ['./guide-list.scss']
 })
-export class GuideList {
-  constructor(public guideItems: GuideItems) {}
+export class GuideList implements OnInit {
+  constructor(public guideItems: GuideItems, public _componentPageTitle: ComponentPageTitle) {}
+
+  ngOnInit(): void {
+    this._componentPageTitle.title = 'Guides';
+  }
 }
 
 
 @NgModule({
   imports: [MdListModule, RouterModule, FooterModule, CommonModule],
   exports: [GuideList],
   declarations: [GuideList],
-  providers: [GuideItems],
+  providers: [GuideItems, ComponentPageTitle],
 })
 export class GuideListModule { }

src/app/pages/guide-viewer/guide-viewer.ts

@@ -1,19 +1,20 @@
-import {Component, NgModule} from '@angular/core';
-import {ActivatedRoute, Router, RouterModule} from '@angular/router';
+import {Component, NgModule, OnInit} from '@angular/core';
+import {ActivatedRoute, RouterModule, Router} from '@angular/router';
 import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items';
 import {FooterModule} from '../../shared/footer/footer';
 import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module';
-
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
   selector: 'guide-viewer',
   templateUrl: './guide-viewer.html',
   styleUrls: ['./guide-viewer.scss'],
 })
-export class GuideViewer {
+export class GuideViewer implements OnInit {
   guide: GuideItem;
 
   constructor(private _route: ActivatedRoute,
+              private _componentPageTitle: ComponentPageTitle,
               private router: Router,
               public guideItems: GuideItems) {
     _route.params.subscribe(p => {
@@ -24,12 +25,16 @@ export class GuideViewer {
       }
     });
   }
+
+  ngOnInit(): void {
+    this._componentPageTitle.title = this.guide.name;
+  }
 }
 
 @NgModule({
   imports: [DocViewerModule, FooterModule, RouterModule],
   exports: [GuideViewer],
   declarations: [GuideViewer],
-  providers: [GuideItems],
+  providers: [GuideItems, ComponentPageTitle],
 })
 export class GuideViewerModule {}

src/app/pages/homepage/homepage.ts

@@ -1,19 +1,26 @@
-import {Component, NgModule} from '@angular/core';
+import {Component, NgModule, OnInit} from '@angular/core';
 import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer';
 import {MdButtonModule} from '@angular/material';
 import {FooterModule} from '../../shared/footer/footer';
 import {RouterModule} from '@angular/router';
+import {ComponentPageTitle} from '../page-title/page-title';
 
 @Component({
   selector: 'app-homepage',
   templateUrl: './homepage.html',
   styleUrls: ['./homepage.scss']
 })
-export class Homepage {}
+export class Homepage implements OnInit {
+  constructor(public _componentPageTitle: ComponentPageTitle) {}
+
+  ngOnInit(): void {
+    this._componentPageTitle.title = '';
+  }
+}
 
 @NgModule({
   imports: [SvgViewerModule, MdButtonModule, FooterModule, RouterModule],
   exports: [Homepage],
   declarations: [Homepage],
 })
-export class HomepageModule { }
+export class HomepageModule {}

src/app/pages/page-title/page-title.spec.ts

@@ -1,8 +1,9 @@
 import {ComponentPageTitle} from './page-title';
-
+import {Title} from '@angular/platform-browser';
 
 describe('ComponentPageTitle', () => {
-  const service: ComponentPageTitle = new ComponentPageTitle();
+  const title: Title = new Title({});
+  const service: ComponentPageTitle = new ComponentPageTitle(title);
 
   it('should initialize title to empty string', () => {
     expect(service._title).toEqual('');

src/app/pages/page-title/page-title.ts

@@ -1,4 +1,5 @@
 import {Injectable} from '@angular/core';
+import {Title} from '@angular/platform-browser';
 
 /**
  * Service responsible for setting the title that appears above the components and guide pages.
@@ -8,5 +9,15 @@ export class ComponentPageTitle {
   _title = '';
 
   get title(): string { return this._title; }
-  set title(title: string) { this._title = title; }
+
+  set title(title: string) {
+    this._title = title;
+    if (title !== '') {
+      title = `${title} | `;
+    }
+    this.bodyTitle.setTitle(`${title}Angular Material`);
+  }
+
+  constructor(private bodyTitle: Title) { }
+
 }