feat(aio): add id to doc-viewer container based on current url

This enables page specific styling via CSS.

aio/src/app/app.component.html

@@ -16,7 +16,7 @@
     <aio-nav-menu [nodes]="sideNavNodes" [currentNode]="currentNode" ></aio-nav-menu>
   </md-sidenav>
 
-  <section class="sidenav-content">
+  <section class="sidenav-content" [id]="pageId">
     <aio-doc-viewer [doc]="currentDocument" (docRendered)="onDocRendered($event)"></aio-doc-viewer>
   </section>
 

aio/src/app/app.component.spec.ts

@@ -104,6 +104,33 @@ describe('AppComponent', () => {
     });
   });
 
+  describe('pageId', () => {
+    let locationService: MockLocationService;
+
+    beforeEach(() => {
+      locationService = fixture.debugElement.injector.get(LocationService) as any;
+    });
+
+    it('should set the id of the doc viewer container based on the current url', () => {
+      const container = fixture.debugElement.query(By.css('section.sidenav-content'));
+
+      locationService.urlSubject.next('guide/pipes');
+      fixture.detectChanges();
+      expect(component.pageId).toEqual('guide-pipes');
+      expect(container.properties['id']).toEqual('guide-pipes');
+
+      locationService.urlSubject.next('news');
+      fixture.detectChanges();
+      expect(component.pageId).toEqual('news');
+      expect(container.properties['id']).toEqual('news');
+
+      locationService.urlSubject.next('');
+      fixture.detectChanges();
+      expect(component.pageId).toEqual('home');
+      expect(container.properties['id']).toEqual('home');
+    });
+  });
+
   describe('currentDocument', () => {
     console.log('PENDING: AppComponent currentDocument');
   });

aio/src/app/app.component.ts

@@ -21,6 +21,7 @@ const sideNavView = 'SideNav';
 export class AppComponent implements OnInit {
 
   currentNode: CurrentNode;
+  pageId: string;
   currentDocument: DocumentContents;
   footerNodes: NavigationNode[];
   isSideBySide = false;
@@ -70,6 +71,7 @@ export class AppComponent implements OnInit {
 
     this.navigationService.currentNode.subscribe(currentNode => {
       this.currentNode = currentNode;
+      this.pageId = this.currentNode.url.replace('/', '-') || 'home';
 
       // Toggle the sidenav if the kind of view changed
       if (this.previousNavView === currentNode.view) { return; }
@@ -131,4 +133,5 @@ export class AppComponent implements OnInit {
   sideNavToggle(value?: boolean) {
     this.sidenav.toggle(value);
   }
+
 }