Projecting AngularJS Content into Angular Components

In Angular the concept of "transclusion" has been replaced by the concept of projection. ng-upgrade provides mechanisms for projecting/transcluding AngularJS content into Angular components:
This is what a simple Angular component that supports projection looks like:
import { Component, Input } from "@angular/core";
selector: "a2-projection",
template: `
Angular Outer Component (Top)
Angular Outer Component (Bottom)
export class A2Projection {}
Here's a very simple AngularJS directive that will be projected into the Angular component:
export function a1ProjectionContentsDirective() {
return {
restrict: "E",
scope: {},
bindToController: {},
controller: A1ProjectionContents,
controllerAs: "a1ProjectionContents",
template: `<p>{{ a1ProjectionContents.message }}</p>`,
class A1ProjectionContents {
message = 'I am an AngularJS Directive "projected" into Angular';
Both the component and the directive must be registered with AngularJS:
import { A2Projection } from "./components/a2-projection";
import { a1ProjectionContentsDirective } from "./components/a1-projection-contents";
// 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
.directive("a2Projection", upgradeAdapter.downgradeNg2Component(A2Projection))
.directive("a1ProjectionContent", a1ProjectionContentsDirective);
Finally, using the HTML selectors is as simple as: