feat(projection): Host Projection service

Author: hansl

src/demo-app/demo-app-module.ts

@@ -33,6 +33,7 @@ import {SnackBarDemo} from './snack-bar/snack-bar-demo';
 import {PortalDemo, ScienceJoke} from './portal/portal-demo';
 import {MenuDemo} from './menu/menu-demo';
 import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tabs/tabs-demo';
+import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-demo';
 
 @NgModule({
   imports: [
@@ -66,6 +67,8 @@ import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tab
     PortalDemo,
     ProgressBarDemo,
     ProgressCircleDemo,
+    ProjectionDemo,
+    ProjectionTestComponent,
     RadioDemo,
     RippleDemo,
     RotiniPanel,

src/demo-app/demo-app/demo-app.ts

@@ -34,6 +34,7 @@ export class DemoApp {
     {name: 'Live Announcer', route: 'live-announcer'},
     {name: 'Overlay', route: 'overlay'},
     {name: 'Portal', route: 'portal'},
+    {name: 'Projection', route: 'projection'},
     {name: 'Progress Bar', route: 'progress-bar'},
     {name: 'Progress Circle', route: 'progress-circle'},
     {name: 'Radio', route: 'radio'},

src/demo-app/demo-app/routes.ts

@@ -27,6 +27,7 @@ import {RippleDemo} from '../ripple/ripple-demo';
 import {DialogDemo} from '../dialog/dialog-demo';
 import {TooltipDemo} from '../tooltip/tooltip-demo';
 import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
+import {ProjectionDemo} from '../projection/projection-demo';
 import {TABS_DEMO_ROUTES} from '../tabs/routes';
 
 export const DEMO_APP_ROUTES: Routes = [
@@ -41,6 +42,7 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'progress-circle', component: ProgressCircleDemo},
   {path: 'progress-bar', component: ProgressBarDemo},
   {path: 'portal', component: PortalDemo},
+  {path: 'projection', component: ProjectionDemo},
   {path: 'overlay', component: OverlayDemo},
   {path: 'checkbox', component: CheckboxDemo},
   {path: 'input', component: InputDemo},

src/demo-app/projection/projection-demo.ts

@@ -0,0 +1,50 @@
+import {Component, ViewChild, ElementRef, OnInit, Input} from '@angular/core';
+import {MdProjectionHostDirective, MdProjectionService} from '@angular/material';
+
+
+@Component({
+  selector: '[projection-test]',
+  template: `
+    <div class="outer {{cssClass}}">
+      Before
+      <md-host><ng-content></ng-content></md-host>
+      After
+    </div>
+  `,
+  styles: [`
+    .outer {
+      background-color: red;
+    }
+  `]
+})
+export class ProjectionTestComponent implements OnInit {
+  @ViewChild(MdProjectionHostDirective) _host: MdProjectionHostDirective;
+  @Input('class') cssClass: any;
+
+  constructor(private _projection: MdProjectionService, private _ref: ElementRef) {}
+
+  ngOnInit() {
+    this._projection.project(this._ref, this._host);
+  }
+}
+
+
+@Component({
+  selector: 'projection-app',
+  template: `
+    <div projection-test class="inner">
+      <div class="content">Content: {{binding}}</div>
+    </div>
+    <br/>
+    <input projection-test [(ngModel)]="binding" [class]="binding" [ngClass]="{'blue': true}">
+    <input [(ngModel)]="binding" class="my-class" [ngClass]="{'blue': true}">
+  `,
+  styles: [`
+    .inner {
+      background-color: blue;
+    }
+  `]
+})
+export class ProjectionDemo {
+  binding: string = 'abc';
+}

src/lib/core/core.ts

@@ -26,6 +26,9 @@ export {
 } from './portal/portal-directives';
 export {DomPortalHost} from './portal/dom-portal-host';
 
+// Projection
+export * from './projection/projection';
+
 // Overlay
 export {Overlay, OVERLAY_PROVIDERS} from './overlay/overlay';
 export {OverlayContainer} from './overlay/overlay-container';

src/lib/core/projection/projection.spec.ts

@@ -0,0 +1,88 @@
+import {TestBed, async} from '@angular/core/testing';
+import {
+  NgModule,
+  Component,
+  ViewChild,
+  ElementRef,
+} from '@angular/core';
+import {ProjectionModule, MdProjectionService, MdProjectionHostDirective} from './projection';
+
+
+describe('Projection', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ProjectionModule.forRoot(), ProjectionTestModule],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  it('should project properly', async(() => {
+    const fixture = TestBed.createComponent(ProjectionTestApp);
+    const appEl: HTMLDivElement = fixture.nativeElement;
+    const outerDivEl = appEl.querySelector('.outer');
+    const innerDivEl = appEl.querySelector('.inner');
+
+    // Expect the reverse of the tests down there.
+    expect(appEl.querySelector('md-host')).not.toBeNull();
+    expect(outerDivEl.querySelector('.inner')).not.toBe(innerDivEl);
+
+    const innerHtml = appEl.innerHTML;
+
+    // Trigger OnInit (and thus the projection).
+    fixture.detectChanges();
+
+    expect(appEl.innerHTML).not.toEqual(innerHtml);
+
+    // Assert `<md-host>` is not in the DOM anymore.
+    expect(appEl.querySelector('md-host')).toBeNull();
+
+    // Assert the outerDiv contains the innerDiv.
+    expect(outerDivEl.querySelector('.inner')).toBe(innerDivEl);
+
+    // Assert the innerDiv contains the content.
+    expect(innerDivEl.querySelector('.content')).not.toBeNull();
+  }));
+});
+
+
+/** Test-bed component that contains a projection. */
+@Component({
+  selector: '[projection-test]',
+  template: `
+    <div class="outer">
+      <md-host><ng-content></ng-content></md-host>
+    </div>
+  `,
+})
+class ProjectionTestComponent {
+  @ViewChild(MdProjectionHostDirective) _host: MdProjectionHostDirective;
+
+  constructor(private _projection: MdProjectionService, private _ref: ElementRef) {}
+  ngOnInit() { this._projection.project(this._ref, this._host); }
+}
+
+
+/** Test-bed component that contains a portal host and a couple of template portals. */
+@Component({
+  selector: 'projection-app',
+  template: `
+    <div projection-test class="inner">
+      <div class="content"></div>
+    </div>
+  `,
+})
+class ProjectionTestApp {
+}
+
+
+
+const TEST_COMPONENTS = [ProjectionTestApp, ProjectionTestComponent];
+@NgModule({
+  imports: [ProjectionModule],
+  exports: TEST_COMPONENTS,
+  declarations: TEST_COMPONENTS,
+  entryComponents: TEST_COMPONENTS,
+})
+class ProjectionTestModule { }
+

src/lib/core/projection/projection.ts

@@ -0,0 +1,56 @@
+import {Injectable, Directive, ModuleWithProviders, NgModule, ElementRef} from '@angular/core';
+
+
+@Directive({
+  selector: 'md-host'
+})
+export class MdProjectionHostDirective {
+  constructor(public ref: ElementRef) {}
+}
+
+
+@Injectable()
+export class MdProjectionService {
+  private _replaceWith(toReplaceEl: HTMLElement, otherEl: HTMLElement) {
+    toReplaceEl.parentElement.replaceChild(toReplaceEl, otherEl);
+  }
+
+  /**
+   * Project an element into a host element.
+   */
+  project(ref: ElementRef, host: MdProjectionHostDirective): void {
+    const componentEl = ref.nativeElement;
+    const hostEl = host.ref.nativeElement;
+    const childNodes = componentEl.childNodes;
+    let child = childNodes[0];
+
+    // Replace ComponentEl by all its children, in place.
+    this._replaceWith(componentEl, child);
+    while (childNodes.length) {
+      child.parentNode.insertBefore(childNodes[0], child.nextSibling);
+      child = child.nextSibling;  // nextSibling is now the childNodes[0].
+    }
+
+    // Insert all host children under the componentEl, then replace host by component.
+    while (hostEl.childNodes.length) {
+      componentEl.appendChild(hostEl.childNodes[0]);
+    }
+    this._replaceWith(hostEl, componentEl);
+
+    // At this point the host is replaced by the component. Nothing else to be done.
+  }
+}
+
+
+@NgModule({
+  exports: [MdProjectionHostDirective],
+  declarations: [MdProjectionHostDirective],
+})
+export class ProjectionModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: ProjectionModule,
+      providers: [MdProjectionService]
+    };
+  }
+}

src/lib/module.ts

@@ -6,6 +6,7 @@ import {
   PortalModule,
   OverlayModule,
   A11yModule,
+  ProjectionModule,
   StyleCompatibilityModule,
 } from './core/index';
 
@@ -59,6 +60,7 @@ const MATERIAL_MODULES = [
   PortalModule,
   RtlModule,
   A11yModule,
+  ProjectionModule,
   StyleCompatibilityModule,
 ];
 
@@ -78,6 +80,7 @@ const MATERIAL_MODULES = [
     MdTabsModule.forRoot(),
     MdToolbarModule.forRoot(),
     PortalModule.forRoot(),
+    ProjectionModule.forRoot(),
     RtlModule.forRoot(),
 
     // These modules include providers.