Transcluding Angular Components into AngularJS Directives

Angular components can be transcluded into AngularJS directives.

Here is a very simple Angular component:

import { Component } from "@angular/core";

@Component({
  selector: "a2-transclusion-contents",
  template: `<p>{{ message }}</p>`,
})
export class A2Transclusion {
  message = 'I am an Angular Component "transcluded" into AngularJS';
}

Here is an AngularJS directive that supports transclusion:

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

class A1Transclusion {}

AngularJS needs to know about both the component and the directive:

import { A2Transclusion } from "./components/a2-transclusion-contents";
import { a1TransclusionDirective } from "./components/a1-transclusion";

// AngularJS 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 AngularJS modules
angular
  .module(APPNAME)
  .directive(
    "a2TransclusionContents",
    upgradeAdapter.downgradeNg2Component(A2Transclusion)
  )
  .directive("a1Transclusion", a1TransclusionDirective);

Finally, Angular content can be transcluded into AngularJS 1.x like so:

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