feat(aio): add `<current-location>` embedded component (#16139)

aio/content/marketing/test.html

@@ -1,5 +1,7 @@
 <h1>Test Code Page</h1>
 
+<p>Current location is <current-location></current-location></p>
+
 <h2>&lt;code-tabs&gt;</h2>
 
 <p>No linenums at code-tabs level</p>

aio/src/app/embedded/current-location.component.spec.ts

@@ -0,0 +1,28 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { LocationService } from 'app/shared/location.service';
+import { CurrentLocationComponent } from './current-location.component';
+
+let currentPath: string;
+class MockLocation {
+  path() { return currentPath; }
+}
+
+describe('CurrentLocationComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CurrentLocationComponent ],
+      providers: [
+        { provide: LocationService, useClass: MockLocation }
+      ]
+    });
+    TestBed.compileComponents();
+  }));
+
+  it('should render the current location', () => {
+    const fixture = TestBed.createComponent(CurrentLocationComponent);
+    const element: HTMLElement = fixture.nativeElement;
+    currentPath = 'a/b/c';
+    fixture.detectChanges();
+    expect(element.innerText).toEqual('a/b/c');
+  });
+});

aio/src/app/embedded/current-location.component.ts

@@ -0,0 +1,15 @@
+/* tslint:disable component-selector */
+import { Component } from '@angular/core';
+import { LocationService } from 'app/shared/location.service';
+
+/**
+ * A simple embedded component that displays the current location path
+ */
+@Component({
+  selector: 'current-location',
+  template: '{{location.path()}}'
+})
+export class CurrentLocationComponent {
+  constructor(public location: LocationService) {
+  }
+}

aio/src/app/embedded/embedded.module.ts

@@ -19,6 +19,7 @@ import { CodeTabsComponent } from './code/code-tabs.component';
 import { ContributorListComponent } from './contributor/contributor-list.component';
 import { ContributorComponent } from './contributor/contributor.component';
 import { DocTitleComponent } from './doc-title.component';
+import { CurrentLocationComponent } from './current-location.component';
 import { LiveExampleComponent, EmbeddedPlunkerComponent } from './live-example/live-example.component';
 import { ResourceListComponent } from './resource/resource-list.component';
 import { ResourceService } from './resource/resource.service';
@@ -27,8 +28,8 @@ import { ResourceService } from './resource/resource.service';
  * such as CodeExampleComponent, LiveExampleComponent,...
  */
 export const embeddedComponents: any[] = [
-  ApiListComponent, CodeExampleComponent, CodeTabsComponent,
-  ContributorListComponent, DocTitleComponent, LiveExampleComponent, ResourceListComponent
+  ApiListComponent, CodeExampleComponent, CodeTabsComponent, ContributorListComponent,
+  CurrentLocationComponent, DocTitleComponent, LiveExampleComponent, ResourceListComponent
 ];
 
 /** Injectable class w/ property returning components that can be embedded in docs */