Transcluding Angular 2 Components into Angular 1 Directives

import {Component} from '@angular/core';
​
@Component ({
  selector: 'a2-transclusion-contents',
  template: `<p>{{ message }}</p>`
})
export class A2Transclusion {
  message =
    'I am an Angular 2 Component "transcluded" into Angular 1.x';
}

export function a1TransclusionDirective() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    bindToController: {},
    controller: A1Transclusion,
    controllerAs: 'a1ProjectionContents',
    template: `
    <p>
      <ng-transclude></ng-transclude>
    </p>
    `
  };
}
​
class A1Transclusion {
}

import {A2Transclusion} from './components/a2-transclusion-contents';
import {a1TransclusionDirective} from './components/a1-transclusion';
​
// Angular 1 Vendor Import
import * as angular from 'angular';
​
// Import the upgradeAdapter singleton
import {upgradeAdapter} from './upgrade-adapter';
​
// Name the application
const APPNAME = 'angular-upgrade-example';
​
// Register classic Angular 1 modules
angular
  .module(APPNAME)
  .directive('a2TransclusionContents',
    upgradeAdapter.downgradeNg2Component(A2Transclusion))
  .directive('a1Transclusion', a1TransclusionDirective);

<a1-transclude>
  <a2-transclusion-contents></a2-transclusion-contents>
</a1-transclude>